tarojs-table

介绍

tarojs-table 是一个基于 Taro3.x 和 React18.x 封装的基础表格。

注意：这只是一个非常基础的表格组件，暂不支持合并行/列，展开行等功能，请谨慎选用。（所支持的功能请看属性配置）

(温馨提示：此组件仅在微信小程序上运行调试过，并未在其他平台进行调试运行，无法保证在其他平台能正常使用。)

安装

npm install tarojs-table

使用

import { View } from '@tarojs/components';
import { useEffect, useState } from 'react';
import Table, { ColumnProps } from "tarojs-table";
// 内含 .css|.less|.scss 类型的样式文件，可自行选择引入
import "tarojs-table/lib/style.css";
// import 'tarojs-table/lib/style.less'
// import 'tarojs-table/lib/style.scss';

export default () => {
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState<any[]>([]);

  useEffect(() => {
    // 模拟loading
    setLoading(true);

    setTimeout(() => {
      setLoading(false);
    }, 2000);

    setDataSource([
      { name: 'Margaret', gender: 'Female', age: 29, occupation: 'Financial Analyst', address: '789 Birch St' },
      { name: 'Michael', gender: 'Male', age: 42, occupation: 'Marketing Manager', address: '456 Pine Ave' },
      //{ ...其他数据 }
    ]);
  }, []);

  const columns: ColumnProps[] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 50,
      fixed: 'left',
      align: 'center',
      render: (text: any, record: any, index: number) => index + 1
    },
    // {...其他列}
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 80,
      fixed: 'right',
      align: 'center',
      className: 'action-cell',
      render: (text: any, record: any, index: number) => <View style={{ color: "blue" }}>编辑</View>
    }
  ];

  return (
    <Table
      loading={loading}
      columns={columns}
      dataSource={dataSource}
      scroll={{ y: '100vh', x: '100vw' }}
    />
  );
};

效果：

属性配置

TableProps

| 参数 | 说明 | 类型 | 可选 | 默认值 | | ---------------- | ------------------------------------------ | ---------------------------------------------- | :--: | :----: | | id | 表格 id | string | 是 | 无 | | columns | 表格列 | ColumnProps[] | 否 | 无 | | dataSource | 表格数据 | any[] | 否 | 无 | | className | 类样式 | string | 是 | 无 | | style | 内联样式 | object | 是 | 无 | | wrapperClassName | 最外层的包裹容器类样式 | string | 是 | 无 | | wrapperStyle | 最外层的包裹容器内联样式 | object | 是 | 无 | | rowKey | 唯一标识 | string | 是 | 无 | | loading | 加载中遮罩 | boolean 丨 LoadingProps | 是 | 无 | | empty | 空数据时显示 | TableEmptyProps | 是 | 无 | | scroll | 内容超出范围滚动 | { x?: number 丨 string, y?: number 丨 string } | 是 | 无 | | onRow | 行属性 | (record: any, index: number) => RowProps | 是 | 无 | | onScroll | 滚动时触发 | Function | 是 | 无 | | onScrollToLower | 滚动到底部/右边，会触发 scrolltolower 事件 | Function | 是 | 无 | | onScrollToUpper | 滚动到顶部/左边，会触发 scrolltoupper 事件 | Function | 是 | 无 |

ColumnProps

| 参数 | 说明 | 类型 | 可选 | 默认值 | | --------- | --------------------------------------------- | ----------------------------------------------------------- | :--: | :----: | | title | 列名 | React.ReactNode | 否 | 无 | | key | 列唯一标识 | string | 是 | 无 | | dataIndex | 列字段 | string | 是 | 无 | | width | 列宽 | number | 是 | 无 | | className | 类样式 | string | 是 | 无 | | align | 内容水平位置 | 'left' 丨 'center' 丨 'right' | 是 | 无 | | fixed | 固定列（设置此项时须设置列宽） | 'left' 丨 'right' | 是 | 无 | | ellipsis | 文本超出省略（默认 1 行省略，可指定多行省略） | boolean 丨 number | 是 | 无 | | sortable | 是否可排序 | boolean | 否 | 无 | | sortOrder | 排序方式 | 'ascend'丨'descend' | 否 | 无 | | onSort | 自定义排序 | (order?: 'ascend'丨'descend') => void | 否 | 无 | | render | 自定义渲染内容 | (value: any, record: any, index: number) => React.ReactNode | 是 | 无 |

RowProps

| 参数 | 说明 | 类型 | 可选 | 默认值 | | --------- | ---------- | -------- | :--: | :----: | | className | 行样式 | string | 是 | 无 | | style | 行内联样式 | object | 是 | 无 | | onTap | 点击行 | Function | 是 | 无 |

TableEmptyProps

| 参数 | 说明 | 类型 | 可选 | 默认值 | | ---- | ----------------- | ------ | :--: | :----: | | img | 自定义图片（src） | string | 是 | 无 | | text | 自定义提示文字 | string | 是 | 无 |

LoadingProps

| 参数 | 说明 | 类型 | 可选 | 默认值 | | ---- | -------------------------- | ------- | :--: | :----: | | show | 是否显示 Loading | boolean | 是 | 无 | | img | 自定义 loading 图片（src） | string | 是 | 无 | | text | 自定义 loading 文字 | string | 是 | 无 |