【鸿蒙表格组件】鸿蒙ArkTS轻量级表格高效渲染组件
wuyotable
一款鸿蒙ArkTS轻量级表格高效渲染组件
组件OpenHarmony三方库地址
简介
轻量化即插即用表格渲染组件，支持多行、多列固定，一级二级三级表头，下滑右滑滚动查看~
版本
OpenHarmony API Version 11及以上
下载安装
ohpm install @wuyo/wuyotable
示例图
表格组件参数说明
WuyoTable
| 参数 | 说明 | 类型 | 默认值 | 是否必传 |
|---|---|---|---|---|
| rowTitle | 表头配置项【参考下面配置】 | Array<title> | - | 是 |
| data | 数据源 | Array<object> | - | 是 |
| isMore | 是否显示更多按钮 | boolean | fasle | 否 |
| showNum | 默认渲染表格数据数量（仅在isMore为true时生效） | int | 5 | 否 |
| stripe | 是否显示斑马纹 | boolean | fasle | 否 |
| loading | 是否加载中 | boolean | fasle | 否 |
| isScroll | 是否可滑动 | boolean | fasle | 否 |
| fixedRowNumber | 悬浮列数 （仅在isScroll为true时有效） | int | 0 | 否 |
| fixedColNumber | 悬浮行数（仅在isScroll为true时有效） | int | 0 | 否 |
| rowHeight | 表头高度 | int | 100 | 否 |
| cellHeight | 单元格高度 | int | 100 | 否 |
| cellWidth | 单元格宽度 | int | 100 | 否 |
| lineWidth | 分割线宽度 | int | 1 | 否 |
| fontSize | 字体大小 | int | 12 | 否 |
| tablePadding | 表格整体左右边距 | int | 8 | 否 |
| titleColor | 表头背景色 | string | #F8FEFF | 否 |
| lineColor | 表格分割线颜色 | string | rgba(237, 237, 237, 1) | 否 |
| loadingColor | 加载中icon颜色 | ResourceColor string | #00BCD4 | 否 |
| noDataText | 空数据文本提示 | string | 暂无数据 | 否 |
| noDataFontSize | 空数据文本字体大小 | int | 14 | 否 |
| noDataImgSrc | 空数据缺省图 | PixelMap ResourceStr DrawableDescriptor | - | 否 |
| defaultTableValue | 默认空值显示 | string | 否 | |
| clickEvent | 单元格点击回调事件 (colData: object, rowTitle: object, index: number) => void; // 回调参数：colData 行数据：rowTitle表头 index：数据源索引 | Function | - | 否 |
使用说明
引入组件
import { WuyoTable } from "@wuyo/wuyotable";
使用组件
在页面build函数中渲染组件
build({ WuyoTable({...【传递参数】}) })
表头配置项
// 表头配置项
interface title {title: string, // 表头名称key?: string, // 对应数据key值fontColor?: string, // 单元格字体颜色fontSize?: number, // 单元格字体大小fontBold?: FontWeight, // 单元格字体加粗bgColor?: string, // 单元格背景颜色width?: number, // 单元格宽度children?: Array<title>, // 多级表头子集
}// 一级表头@State rowTitle: Array<title> = [{title: '序号',key: 'index',},{title: '姓名',key: 'name',fontColor: 'rgb(255, 164, 0)'},{title: '性别',key: 'sex',},{title: '年龄',key: 'age',},{title: '职业',key: 'job',},{title: '备注',key: 'remark',},];// 多级表头@State twoRowTitle: Array<title> = [{title: '序号',key: 'index',width: 50,},{title: '个人基础信息',children: [{title: '姓名',key: 'name',fontColor: 'rgb(255, 164, 0)'},{title: '性别',key: 'sex',},{title: '年龄',key: 'age',},{title: '补充说明',children: [{title: '年龄',key: 'age',},{title: '备注',key: 'remark',},]}]},]
数据源
@State data: Array<ESObject> = [{index: 1,name: '张三',sex: '男',age: 18,job: '程序员',remark: '无',fontColor: 'rgb(41, 173, 0)'},{index: 2,name: '李四',sex: '男',age: 19,job: '说唱歌手',remark: '无',},{index: 3,name: '王五',sex: '男',age: 25,job: '产品经理',remark: '会开车',},{index: 4,name: '赵六',sex: '女',age: 18,job: '测试工程师',remark: '',},{index: 5,name: '钱七',sex: '女',age: 17,job: '大学生',remark: '',},]
表格组件常用参数示例
WuyoTable({isMore: true, // 是否显示更多按钮showNum: 2, // 默认渲染表格数据数量（仅在isMore为true时生效）stripe: true, // 是否显示斑马纹fixedRowNumber: 1, // 悬浮列数（仅在isScroll为true时有效）fixedColNumber: 1, // 悬浮行数（仅在isScroll为true时有效）isScroll: true, // 是否开启滑动cellHeight: 50, // 统一单元格高度rowHeight: 100, // 统一表头高度loading: this.loading, // 表格是否加载中rowTitle: this.twoRowTitle, // 表头配置项data: this.data, // 表格数据clickEvent: (colData: object, rowTitle: object, index: number) => {hilog.info(0xFF00, "tableClick", '%{public}s%{public}s', '点击了第', index.toString() + '条数据');hilog.info(0xFF00, "tableClick", '%{public}s%{public}s', '当前数据：', JSON.stringify(colData));hilog.info(0xFF00, "tableClick", '%{public}s%{public}s', '当前数据表头：', JSON.stringify(rowTitle));} // 各个单元格点击回调事件})