更新记录

1.0.0（2025-07-18） 下载此版本

首次提交

1. 支持缩放
2. 滑动时表头和首列冻结
3. 表头可设置宽度、对齐方式、label支持html
4. 表体高度自适应(根据内容来)
5. 自定义单元格样式

平台兼容性

uni-app(4.06)

其他

• 可缩放固定行列表格组件使用文档

  组件介绍

  该组件是一个基于 UniApp (Vue2) 开发的高性能表格组件，支持表头固定、首列固定、手势缩放及滚动同步功能，适用于需要展示大量数据且要求良好交互体验的场景。

  组件特性

  • 支持表头与首列固定，滚动时保持可见
  • 支持手势缩放与按钮缩放控制
  • 滚动同步机制，确保视图一致性
  • 自定义单元格样式
  • 自适应行高与列宽
  • 空状态提示（无表头 / 无数据）

  Props 属性说明

  属性名	类型	默认值	说明
  columns	Array	[]	表头配置数组，详细结构见下方说明
  tableData	Array	[]	表格数据数组，每个元素为一行数据对象
  rowHeight	Number	40	表格行高度（像素）
  headerHeight	Number	60	表头高度（像素）
  headerFontSize	Number	16	表头字体大小（像素）
  headerFontColor	String	'#333'	表头字体颜色
  bodyFontSize	Number	15	表格内容字体大小（像素）
  bodyFontColor	String	'#222'	表格内容字体颜色
  cellStyle	Function	() => () => ({})	单元格样式回调函数

  columns 表头配置项说明

  columns 数组中的每个元素为一个对象，包含以下属性：

  属性名	类型	说明
  label	String	列标题文本
  prop	String	对应表格数据中的字段名
  width	Number	列宽度（像素）
  align	String	对齐方式，可选值：'left'/'center'/'right'，默认 'left'

tableData 表格数据配置项说明

tableData 是用于存储表格具体内容的数组，数组中的每个元素代表表格中的一行数据，其结构需与 columns 表头配置中的 prop 字段对应，以确保数据能 正确渲染到对应列中。

数据结构

tableData: [
  { 
    prop1: value1, 
    prop2: value2,
    // ...更多字段
  },
  // ...更多行数据
]

字段说明

示例

假设 columns 表头配置为：

columns: [
  { label: '序号', prop: 'id', width: 80 },
  { label: '姓名', prop: 'name', width: 120 },
  { label: '年龄', prop: 'age', width: 80 },
  { label: '是否在职', prop: 'isWorking', width: 100 }
]

则对应的 tableData 配置应为：

tableData: [
  { id: 1, name: '张三', age: 28, isWorking: true },
  { id: 2, name: '李四', age: 35, isWorking: true },
  { id: 3, name: '王五', age: 42, isWorking: false }
]

注意事项

• 若 tableData 为空数组（[]），表格会显示 “没有表格数据” 的空状态提示
• 字段值为 null 或 undefined 时，表格对应单元格会显示为空
• 若行数据中存在 columns 未配置的额外字段，这些字段不会被渲染到表格中
• 对于大量数据（如超过 100 行），建议结合分页加载或虚拟滚动优化性能（当前组件未内置虚拟滚动，需额外实现）

交互说明

1. 滚动操作：
   • 表格内容区域可同时进行水平和垂直滚动
   • 固定区域会自动同步滚动位置
2. 缩放操作：
   • 支持双指手势缩放表格
   • 右下角提供缩放控制按钮（+/-）
   • 缩放范围：0.2-2 倍

注意事项

1. 确保 columns 配置中至少包含一列数据，否则会显示 "请传入表头数据" 提示
2. columns 数组的第一个元素会被作为固定首列
3. 当 tableData 为空时，会显示 "没有表格数据" 提示
4. 为获得最佳性能，建议控制单次渲染的数据量（可考虑分页加载）
5. 在移动端使用时，确保父容器没有冲突的触摸事件处理

样式自定义

通过以下方式可自定义表格样式：

1. 使用cellStyle回调函数自定义特定单元格样式

2. 通过 props 属性设置字体大小、颜色等基础样式

3. 在 columns 配置中设置列宽和对齐方式

4. 如需深度定制，可修改组件内部的 scoped 样式（建议通过覆盖类名实现）