更新记录

1.0.4（2026-08-28） 下载此版本

• 新增合计行（showSummaryRow + 列级 summary，支持 sum/avg/min/max/count 及自定义函数）
• 新增合计列（type: 'summary' + summaryFields，位置由列顺序决定）
• 新增函数式计算列（compute: (row, index) => value）
• 新增导出数据钩子（getExportData()，返回结构化数据）

1.0.3（2026-08-28） 下载此版本

• 支持自定义单元格插槽（type: 'slot'）
• 支持自定义表头插槽（headerSlot: true）

1.0.2（2026-03-31） 下载此版本

增加操作列功能 支持Vue3

平台兼容性

uni-app(4.07)

uni-app x(4.07)

SimpleX-Table 表格组件

一个功能丰富的 UniApp 表格组件，支持固定列、排序、滚动加载等功能。

功能特性

• 支持固定列（sticky columns）
• 支持列排序
• 支持水平和垂直滚动
• 支持自定义列宽
• 支持空数据提示
• 支持滚动加载更多
• 支持边框样式配置
• 支持自定义行唯一标识
• 支持操作列及自定义按钮配置
• 支持自定义单元格插槽（type: 'slot'）
• 支持自定义表头插槽（headerSlot: true）
• 支持合计行（按列聚合）
• 支持合计列（按行汇总，位置可自定义）
• 支持函数式计算列

参数说明

Columns 配置项

每个 columns 数组元素支持以下属性：

事件说明

使用示例

基础用法

<template>
  <view>
    <simplex-table :data="tableData" :columns="columns" :height="400" border />
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "张三", age: 25, department: "技术部" },
        { id: 2, name: "李四", age: 30, department: "产品部" },
        { id: 3, name: "王五", age: 28, department: "设计部" },
      ],
      columns: [
        { title: "姓名", key: "name", width: 150 },
        { title: "年龄", key: "age", width: 150 },
        { title: "部门", key: "department", width: 150 },
      ],
    };
  },
};
</script>

固定列和排序

<template>
  <view>
    <simplex-table :data="tableData" :columns="columns" :height="400" @sort-change="handleSortChange" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "张三", age: 25, department: "技术部", salary: 12000 },
        { id: 2, name: "李四", age: 30, department: "产品部", salary: 15000 },
        { id: 3, name: "王五", age: 28, department: "设计部", salary: 10000 },
      ],
      columns: [
        { title: "ID", key: "id", width: 80, fixed: true, sortable: true },
        { title: "姓名", key: "name", width: 100, fixed: true },
        { title: "年龄", key: "age", width: 80, sortable: true },
        { title: "部门", key: "department", width: 120 },
        { title: "薪资", key: "salary", width: 100, sortable: true },
      ],
    };
  },
  methods: {
    handleSortChange(sortInfo) {
      console.log("排序信息:", sortInfo);
      // 根据 sortInfo.sortBy 和 sortInfo.sortOrder 进行排序处理
    },
  },
};
</script>

操作列

<template>
  <view>
    <simplex-table :data="tableData" :columns="columns" @action-click="handleActionClick" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "张三", status: 1 },
        { id: 2, name: "李四", status: 0 },
      ],
      columns: [
        { title: "姓名", key: "name", width: 150 },
        { title: "状态", key: "status", width: 100 },
        {
          title: "操作",
          type: "action",
          width: 150,
          buttons: [
            { text: "编辑", class: "btn-edit", style: "color: #007aff;" },
            { text: "删除", class: "btn-delete", style: "color: #dd524d;" },
          ],
          // 也支持动态返回按钮：
          // buttons: (row) => row.status === 1 ? [{ text: '禁用' }] : [{ text: '启用' }]
        },
      ],
    };
  },
  methods: {
    handleActionClick({ btn, row, index }) {
      console.log("点击了按钮:", btn.text, "当前行数据:", row);
    },
  },
};
</script>

自定义插槽

<template>
  <view>
    <simplex-table :data="tableData" :columns="columns">
      <!-- 自定义单元格：列配置 type: 'slot' 时生效 -->
      <template #cell="{ row, column, index }">
        <view v-if="column.key === 'status'">
          {{ row.status === 1 ? "启用" : "禁用" }}
        </view>
        <view v-else-if="column.key === 'amount'">￥{{ row.amount }}</view>
      </template>

      <!-- 自定义表头：列配置 headerSlot: true 时生效 -->
      <template #header="{ column }">
        <view v-if="column.key === 'status'">状态（自定义）</view>
      </template>
    </simplex-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "张三", status: 1, amount: 1200 },
        { id: 2, name: "李四", status: 0, amount: 800 },
      ],
      columns: [
        { title: "姓名", key: "name", width: 150 },
        { title: "状态", key: "status", width: 100, type: "slot", headerSlot: true },
        { title: "金额", key: "amount", width: 100, type: "slot" },
      ],
    };
  },
};
</script>

只有标记了 type: 'slot' / headerSlot: true 的列才会走对应插槽，其余列保持默认渲染。插槽作用域参数：单元格为 {row, column, index}，表头为 {column, index}。

合计行与列计算

<template>
  <view>
    <simplex-table :data="tableData" :columns="columns" show-summary-row />
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "张三", jan: 100, feb: 200, price: 15, qty: 2 },
        { id: 2, name: "李四", jan: 150, feb: 250, price: 20, qty: 3 },
      ],
      columns: [
        { title: "姓名", key: "name", width: 120 },
        // 函数式计算列
        { title: "金额", key: "amount", width: 120, compute: (row) => row.price * row.qty },
        // 合计行：配置了 summary 的列参与聚合
        { title: "一月", key: "jan", width: 100, summary: "sum" },
        { title: "二月", key: "feb", width: 100, summary: "avg" },
        // 合计列：位置由列顺序决定，可放在任意位置
        { title: "两月合计", type: "summary", summaryFields: ["jan", "feb"], width: 120 },
      ],
    };
  },
};
</script>

合计行通过 show-summary-row 开启，只有配置了 summary 的列会参与聚合，首列默认显示“合计”。合计列的位置由它在 columns 数组中的顺序决定，可放在任意位置。

自定义计算

合计行的 summary 和计算列都可以传入函数，实现任意逻辑：

columns: [
  // 合计行：自定义聚合函数（入参为全量数据）
  {
    title: "平均单价",
    key: "price",
    summary: (data) => {
      const total = data.reduce((s, r) => s + r.price, 0);
      return (total / data.length).toFixed(2);
    },
  },
  // 计算列：按行自定义计算（入参为当前行与行索引）
  { title: "总成本", compute: (row) => row.price * row.qty },
  { title: "加权分", compute: (row) => row.score * row.weight + row.bonus },
];

summary 传函数时优先级高于内置聚合（sum/avg/min/max/count）。compute 用于按行自定义计算，与合计列的 type: 'summary'（快捷求和）二选一使用。

导出数据

组件暴露 getExportData() 方法，返回结构化数据（表头 + 已解析的行数据），供宿主页面接入任意导出库：

<template>
  <view>
    <simplex-table ref="table" :data="tableData" :columns="columns" />
    <button @click="handleExport">导出</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleExport() {
      const { headers, rows } = this.$refs.table.getExportData();
      // 自行将 headers/rows 转成 CSV 或 xlsx 即可
      console.log(headers, rows);
    },
  },
};
</script>

导出会排除操作列（type: 'action'）；计算列、嵌套字段、合计列的值均已通过 getCellValue 解析为最终显示值。

使用场景

1. 数据展示：展示结构化数据，如用户列表、订单信息等
2. 数据分析：展示大量数据的统计信息
3. 后台管理系统：在管理后台中展示各类业务数据
4. 移动端报表：在移动设备上展示报表数据
5. 复杂表格：需要固定列、排序等高级功能的场景

注意事项

1. 当使用固定列功能时，建议为固定列设置明确的 width
2. 排序功能需要在列配置中设置 sortable: true
3. 使用嵌套数据时，通过 key 属性指定路径，如 user.name
4. 表格高度默认为 auto，会自动计算窗口高度，也可手动指定具体数值
5. 当数据为空时会显示 emptyText 设置的提示信息
6. 滚动加载功能需要配合 load-more 和 load-complete 事件使用

样式自定义

组件使用了以下 UniApp 样式变量，可以通过全局样式覆盖：

• $uni-bg-color - 背景色
• $uni-border-color - 边框颜色
• $uni-text-color - 文字颜色
• $uni-text-color-grey - 灰色文字颜色
• $uni-font-size-base - 基础字体大小
• $uni-color-primary - 主色调

可以通过覆盖这些变量来自定义组件样式。