【鸿蒙表格组件】鸿蒙ArkTS轻量级表格高效渲染组件

wuyotable

一款鸿蒙ArkTS轻量级表格高效渲染组件

组件OpenHarmony三方库地址

简介

轻量化即插即用表格渲染组件，支持多行、多列固定，一级二级三级表头，下滑右滑滚动查看~

版本

OpenHarmony API Version 11及以上

下载安装

ohpm install @wuyo/wuyotable

示例图

表格组件参数说明

WuyoTable

使用说明

引入组件

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));
          } // 各个单元格点击回调事件
    })