更新记录

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: 100 },
        { title: '年龄', key: 'age', width: 80 },
        { title: '部门', key: 'department', width: 120 }
      ]
    }
  }
}
</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>

使用场景

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

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