@tanzhenxing/zx-table v1.0.2

zx-table 表格组件

一个跨平台的表格组件，支持 H5、小程序和 App，基于 uniapp 和 Vue3 setup 语法开发。

特性

• 支持跨平台：H5、微信小程序、支付宝小程序、App 等
• 使用 Vue3 组合式 API (setup)
• 支持基本表格、带边框表格、斑马纹表格
• 支持自定义列模板
• 支持表格事件（行点击、单元格点击、表头点击等）
• 支持自定义样式

安装

npm install @tanzhenxing/zx-table

引入组件

全局引入

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import ZxTable from '@tanzhenxing/zx-table'

const app = createApp(App)
app.use(ZxTable)
app.mount('#app')

局部引入

// 在需要使用的页面中引入
import { ZxTable, ZxTableColumn } from '@tanzhenxing/zx-table'

基本用法

<template>
  <zx-table :data="tableData">
    <zx-table-column prop="date" label="日期" width="180"></zx-table-column>
    <zx-table-column prop="name" label="姓名" width="180"></zx-table-column>
    <zx-table-column prop="address" label="地址"></zx-table-column>
  </zx-table>
</template>

<script setup>
import { ref } from 'vue';

const tableData = [
  {
    date: '2023-01-01',
    name: '张三',
    address: '北京市朝阳区芍药居'
  },
  {
    date: '2023-01-02',
    name: '李四',
    address: '上海市浦东新区张江高科'
  },
  {
    date: '2023-01-03',
    name: '王五',
    address: '广州市天河区珠江新城'
  },
  {
    date: '2023-01-04',
    name: '赵六',
    address: '深圳市南山区科技园'
  }
];
</script>

带斑马纹表格

使用 stripe 属性可以创建带斑马纹的表格，以便区分不同行。

<zx-table :data="tableData" stripe>
  <zx-table-column prop="date" label="日期" width="180"></zx-table-column>
  <zx-table-column prop="name" label="姓名" width="180"></zx-table-column>
  <zx-table-column prop="address" label="地址"></zx-table-column>
</zx-table>

带边框表格

使用 border 属性可以为表格添加边框。

<zx-table :data="tableData" border>
  <zx-table-column prop="date" label="日期" width="180"></zx-table-column>
  <zx-table-column prop="name" label="姓名" width="180"></zx-table-column>
  <zx-table-column prop="address" label="地址"></zx-table-column>
</zx-table>

自定义列模板

通过 slot 可以自定义列的内容，参数包括 row（当前行数据）、column（当前列数据）和 $index（当前行索引）。

<zx-table :data="tableData" border>
  <zx-table-column prop="date" label="日期" width="180"></zx-table-column>
  <zx-table-column prop="name" label="姓名" width="180"></zx-table-column>
  <zx-table-column label="操作">
    <template #default="scope">
      <view class="button-group">
        <button @tap="handleEdit(scope.row)">编辑</button>
        <button @tap="handleDelete(scope.$index, scope.row)">删除</button>
      </view>
    </template>
  </zx-table-column>
</zx-table>

表格事件

表格组件提供了多种事件：

<zx-table 
  :data="tableData" 
  @row-click="handleRowClick"
  @cell-click="handleCellClick"
  @header-click="handleHeaderClick"
>
  <!-- 列定义 -->
</zx-table>

API

zx-table 属性

zx-table 事件

zx-table-column 属性

zx-table-column 插槽

示例

查看 src/pages/components/table/index.vue 获取更多使用示例。