更新记录

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

增加操作列功能 支持Vue3

1.0.1（2025-11-27） 下载此版本

• 优化了空数据状态下文本遮挡header的问题。
• 优化了高度处理逻辑，此处height应该为最大高度，有利于解决表格数据较少时候占据过多空白空间的问题。

1.0.0（2025-09-01） 下载此版本

添加基本表格功能

平台兼容性

uni-app(4.07)

uni-app x(4.07)

SimpleX-Table 表格组件

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

功能特性

• 支持固定列（sticky columns）
• 支持列排序
• 支持水平和垂直滚动
• 支持自定义列宽
• 支持空数据提示
• 支持滚动加载更多
• 支持边框样式配置
• 支持自定义行唯一标识
• 支持操作列及自定义按钮配置

参数说明

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>

使用场景

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 - 主色调

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