TaroFlex Table

一个灵活的多端表格组件，基于Taro.js，支持微信、支付宝、百度、字节跳动、QQ、京东小程序以及H5环境。

特性

• 🌟 多端适配 - 同一套代码，多端运行
• 📊 功能丰富 - 支持固定表头、固定列、分页等功能
• 🚀 高性能 - 针对小程序和H5环境优化，流畅渲染
• 🎨 可定制化 - 丰富的样式自定义能力
• 💡 TypeScript - 完整的类型定义

安装

# 使用 npm
npm install taro-flex-table --save

# 使用 yarn
yarn add taro-flex-table

# 使用 pnpm
pnpm add taro-flex-table

基本用法

import React from 'react';
import { View } from '@tarojs/components';
import { Table, TableColumn } from 'taro-flex-table';

interface User {
  id: string;
  name: string;
  age: number;
}

const BasicTable: React.FC = () => {
  // 数据源
  const dataSource: User[] = [
    { id: '1', name: '张三', age: 28 },
    { id: '2', name: '李四', age: 32 },
    { id: '3', name: '王五', age: 24 }
  ];

  // 列定义
  const columns: TableColumn<User>[] = [
    {
      key: 'name',
      title: '姓名',
      dataIndex: 'name',
      width: 100
    },
    {
      key: 'age',
      title: '年龄',
      dataIndex: 'age',
      width: 80
    }
  ];

  return (
    <View>
      <Table<User>
        columns={columns}
        dataSource={dataSource}
        rowKey="id"
        // 启用自动多端适配，组件会根据当前运行平台选择最佳配置
        adapter={true}
      />
    </View>
  );
};

export default BasicTable;

多端支持情况

TaroFlex Table 组件已全面支持以下平台：

| 平台 | 支持情况 | 优化重点 | 特有功能 | | --- | --- | --- | --- | | 微信小程序 | ✅ 完全支持 | 滚动性能 | 增强滚动、手势操作 | | 支付宝小程序 | ✅ 完全支持 | 渲染效率 | 手势导航 | | 百度小程序 | ✅ 完全支持 | 基础功能 | - | | 字节跳动小程序 | ✅ 完全支持 | 基础功能 | - | | QQ小程序 | ✅ 完全支持 | 基础功能 | - | | 京东小程序 | ✅ 完全支持 | 基础功能 | - | | H5 | ✅ 完全支持 | 交互丰富度 | 键盘导航、快速跳转、富样式 | | 鸿蒙应用 | ⚠️ 基础支持 | 基础渲染 | - |

自动多端适配

组件提供了自动多端适配能力，只需要设置 adapter 属性：

<Table
  columns={columns}
  dataSource={dataSource}
  rowKey="id"
  // 启用自动多端适配
  adapter={true}
/>

启用后，组件会根据当前运行平台自动优化以下方面：

• 行高与字体大小：在小程序中使用更大的行高和字体，提升触控友好度
• 滚动性能：在微信小程序中自动启用增强滚动
• 分页配置：根据平台特性设置合适的每页条数
• 手势操作：根据平台支持情况启用不同的手势
• 样式渲染：自动应用平台特定样式类名

平台特定配置

如果需要更细粒度控制，可以手动设置平台特定配置：

// 微信小程序特有配置
<Table
  columns={columns}
  dataSource={dataSource}
  rowKey="id"
  // 增强滚动（仅微信小程序生效）
  enhanced={true}
  // 显式设置行高
  rowHeight={88}
/>

// H5特有配置
<Table
  columns={columns}
  dataSource={dataSource}
  rowKey="id"
  // H5自定义样式
  className="desktop-table"
  pagination={{
    current: 1,
    pageSize: 20,
    total: 100,
    // 快速跳转（仅H5支持）
    showQuickJumper: true
  }}
/>

使用平台检测API

组件导出了一系列平台检测工具，方便在应用中进行条件渲染：

import React from 'react';
import { View } from '@tarojs/components';
import { Table, isWeapp, isH5, getPlatformType } from 'taro-flex-table';

const TablePage = () => {
  // 获取当前平台类型
  const platform = getPlatformType();
  
  return (
    <View>
      {isWeapp() && <View>当前在微信小程序中运行</View>}
      
      <Table
        // ...表格配置
        // 根据平台设置行高
        rowHeight={isH5() ? 48 : 88}
      />
      
      {/* 平台特定额外功能 */}
      {platform === 'h5' && <View>桌面端专属功能</View>}
    </View>
  );
};

API

Table 表格

| 属性 | 说明 | 类型 | 默认值 | 平台差异 | | --- | --- | --- | --- | --- | | columns | 表格列定义 | TableColumn<T>[] | - | - | | dataSource | 表格数据源 | T[] | - | - | | rowKey | 行数据唯一标识字段名 | string | - | - | | bordered | 是否显示边框 | boolean | false | - | | loading | 表格加载状态 | boolean | false | - | | showHeader | 是否显示表头 | boolean | true | - | | rowHeight | 表格行高，单位px | number | - | 小程序默认88px，H5默认48px | | height | 表格高度，设置后将启用固定表头，单位px | number | - | - | | width | 表格宽度，设置后将启用水平滚动，单位px | number | - | - | | striped | 是否使用斑马纹 | boolean | false | - | | pagination | 分页配置 | TablePaginationConfig | - | - | | rowSelection | 行选择配置 | TableRowSelection<T> | - | 小程序端选中效果略有差异 | | onRowClick | 行点击事件回调函数 | (record: T, index: number) => void | - | - | | emptyText | 空数据提示文案 | string | '暂无数据' | - | | rowClassName | 自定义行类名函数 | (record: T, index: number) => string | - | - | | className | 表格容器自定义类名 | string | - | - | | style | 表格容器自定义样式 | React.CSSProperties | - | H5支持更多样式属性 | | adapter | 启用多端适配 | boolean \| TableAdapterOptions | true | - | | enhanced | 启用增强滚动 | boolean | 微信小程序默认true，其他平台false | 仅微信小程序支持 | | enableLongPress | 启用长按操作 | boolean | 微信小程序和H5默认true，其他平台false | 仅微信小程序和H5支持 |

TableColumn 列定义

| 属性 | 说明 | 类型 | 默认值 | 平台差异 | | --- | --- | --- | --- | --- | | key | 列唯一标识 | string | - | - | | title | 列标题 | string | - | - | | dataIndex | 数据字段名 | string | - | - | | width | 列宽度，单位px | number | - | - | | fixed | 列固定方向 | 'left' | 'right' | - | 小程序性能可能略低 | | align | 对齐方式 | 'left' | 'center' | 'right' | 'left' | - | | render | 自定义渲染函数 | (value: any, record: T, index: number) => ReactNode | - | - | | type | 列类型，目前支持选择列 | 'selection' | - | - | | hidden | 是否隐藏列 | boolean | false | - |

TablePaginationConfig 分页配置

| 属性 | 说明 | 类型 | 默认值 | 平台差异 | | --- | --- | --- | --- | --- | | current | 当前页码 | number | 1 | - | | pageSize | 每页条数 | number | 10 | 根据平台自动调整：H5-20条，微信-15条，其他小程序-10条 | | total | 总数据量 | number | - | - | | showQuickJumper | 是否显示快速跳转 | boolean | false | 仅H5支持 | | showSizeChanger | 是否显示页码选择器 | boolean | false | - | | pageSizeOptions | 可选的每页条数选项 | string[] | ['10', '20', '50', '100'] | - | | onChange | 页码或每页条数变化回调 | (page: number, pageSize: number) => void | - | - |

TableAdapterOptions 多端适配配置

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | enhanced | 是否启用增强滚动 | boolean | 根据平台决定 | | virtualScroll | 是否启用虚拟滚动 | boolean | 根据平台决定 | | platformClassName | 自定义平台特定类名 | string | - |

示例

查看示例代码获取更多使用示例。

贡献指南

欢迎提交问题和贡献代码，一起完善这个多端表格组件！

1. Fork 仓库
2. 创建特性分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 创建 Pull Request

许可证

MIT