Table 表格

定义／Definition

标签栏用于让用户在不同的子任务、视图和模式中进行切换。

规则 / Rule

  • 单列高度为44dp

  • 表格中内容不宜附带组件，如需组件请选择表单或列表

  • 数据中文字内容左对齐，数字内容以小数点对齐，单元格前后间距为margin-2；

  • 当数据量很多无法一次展现完全，可以固定表格的表头或行标题列，方便用户横向或纵向滚动时阅读时对照属性；

  • h5页面中的表格，只能显示少量精简的内容，如果判断表格内内容文案过长，就不适合以表格形式展现；

  • h5页面中的表格横向最好显示4列以内；

代码演示

纵向

简单表格，默认为纵向排列 

  1. import { Table } from 'antd-mobile';
  3. const columns = [
  4.   { title: '名字', dataIndex: 'name', key: 'name' },
  5.   { title: '品种', dataIndex: 'type', key: 'type' },
  6.   { title: '属性', dataIndex: 'class', key: 'class' },
  7. ];
  9. const data = [{
  10.   name: '科多',
  11.   type: '英短',
  12.   class: '猫',
  13.   key: '1',
  14. }, {
  15.   name: '萨满',
  16.   type: '英短',
  17.   class: '猫',
  18.   key: '2',
  19. }, {
  20.   name: '开心',
  21.   type: '约克夏',
  22.   class: '犬',
  23.   key: '3',
  24. }];
  26. ReactDOM.render(<div style={{ padding: 20 }}>
  27.   <Table
  28.     columns={columns}
  29.     dataSource={data}
  30.   />
  31. </div>, mountNode);

横向

简单的表格，无表头，用标题列替代表头，columns第一项为取竖向标题的索引，dataSource每项中需要指定标题的值。 

  1. import { Table } from 'antd-mobile';
  3. const columns = [
  4.   { title: '标题', dataIndex: 'title', key: 'title' },
  5.   { title: '名字', dataIndex: 'name', key: 'name' },
  6.   { title: '品种', dataIndex: 'type', key: 'type' },
  7.   { title: '属性', dataIndex: 'class', key: 'class' },
  8. ];
  10. const data = [{
  11.   title: '宠物一',
  12.   name: '科多',
  13.   type: '英短',
  14.   class: '猫',
  15.   key: '1',
  16. }, {
  17.   title: '宠物二',
  18.   name: '萨满',
  19.   type: '英短',
  20.   class: '猫',
  21.   key: '2',
  22. }, {
  23.   title: '宠物三',
  24.   name: '开心',
  25.   type: '约克夏',
  26.   class: '犬',
  27.   key: '3',
  28. }];
  30. ReactDOM.render(<div style={{ padding: 20 }}>
  31.   <Table
  32.     direction="horizon"
  33.     columns={columns}
  34.     dataSource={data}
  35.   />
  36. </div>, mountNode);

混合

有表头和标题列混合使用 

  1. import { Table } from 'antd-mobile';
  3. const columns = [
  4.   { title: '', dataIndex: 'title', key: 'title' },
  5.   { title: '名字', dataIndex: 'name', key: 'name' },
  6.   { title: '品种', dataIndex: 'type', key: 'type' },
  7.   { title: '属性', dataIndex: 'class', key: 'class' },
  8. ];
  10. const data = [{
  11.   title: '宠物一',
  12.   name: '科多',
  13.   type: '英短',
  14.   class: '猫',
  15.   key: '1',
  16. }, {
  17.   title: '宠物二',
  18.   name: '萨满',
  19.   type: '英短',
  20.   class: '猫',
  21.   key: '2',
  22. }, {
  23.   title: '宠物三',
  24.   name: '开心',
  25.   type: '约克夏',
  26.   class: '犬',
  27.   key: '3',
  28. }];
  30. ReactDOM.render(<div style={{ padding: 20 }}>
  31.   <Table
  32.     direction="mix"
  33.     columns={columns}
  34.     dataSource={data}
  35.   />
  36. </div>, mountNode);

横向滚动

横向滚动的表格，无锁定项 

  1. import { Table } from 'antd-mobile';
  3. const columns = [
  4.   { title: '姓名', dataIndex: 'a', key: 'a', width: 100 },
  5.   { title: '年龄', dataIndex: 'b', key: 'b', width: 100 },
  6.   { title: '身高', dataIndex: 'c', key: 'c', width: 100 },
  7.   { title: '体重', dataIndex: 'b', key: 'd', width: 100 },
  8.   { title: '爱好', dataIndex: 'b', key: 'e', width: 100 },
  9.   { title: '生日', dataIndex: 'b', key: 'f', width: 100 },
  10.   { title: '住址', dataIndex: 'b', key: 'g', width: 100 },
  11.   { title: '电话', dataIndex: 'b', key: 'h', width: 100 },
  12.   { title: '邮编', dataIndex: 'b', key: 'i', width: 100 },
  13.   { title: '其他', dataIndex: 'b', key: 'j', width: 100 },
  14. ];
  16. const data = [
  17.   { a: '二哈', b: '32', d: 3, key: '1' },
  18.   { a: '小明', b: '98', d: 3, key: '2' },
  19.   { a: '猪头', c: '16', d: 2, key: '3' },
  20.   { a: '小二', c: '33', d: 2, key: '4' },
  21. ];
  23. ReactDOM.render(<div style={{ padding: 20 }}>
  24.   <Table
  25.     scrollX
  26.     columns={columns}
  27.     dataSource={data}
  28.   />
  29. </div>, mountNode);

锁定标题列

标题列锁定，可横向滚动 

  1. import { Table } from 'antd-mobile';
  3. const columns = [
  4.   { title: '标题', dataIndex: 'title', key: 'title', width: 100, fixed: 'left' },
  5.   { title: '姓名', dataIndex: 'a', key: 'a', width: 100 },
  6.   { title: '年龄', dataIndex: 'b', key: 'b', width: 100 },
  7.   { title: '身高', dataIndex: 'c', key: 'c', width: 100 },
  8.   { title: '体重', dataIndex: 'b', key: 'd', width: 100 },
  9.   { title: '爱好', dataIndex: 'b', key: 'e', width: 100 },
  10.   { title: '生日', dataIndex: 'b', key: 'f', width: 100 },
  11.   { title: '住址', dataIndex: 'b', key: 'g', width: 100 },
  12.   { title: '电话', dataIndex: 'b', key: 'h', width: 100 },
  13.   { title: '邮编', dataIndex: 'b', key: 'i', width: 100 },
  14.   { title: '其他', dataIndex: 'b', key: 'j', width: 100 },
  15. ];
  17. const data = [
  18.   { title: '人物1', a: '二哈', b: '32', d: 3, key: '1' },
  19.   { title: '人物2', a: '小明', b: '98', d: 3, key: '2' },
  20.   { title: '人物3', a: '猪头', c: '16', d: 2, key: '3' },
  21.   { title: '人物4', a: '小二', c: '33', d: 2, key: '4' },
  22. ];
  24. ReactDOM.render(<div style={{ padding: 20 }}>
  25.   <Table
  26.     titleFixed
  27.     columns={columns}
  28.     dataSource={data}
  29.   />
  30. </div>, mountNode);

Table表格 - 图1

API

Tabs

参数说明类型默认值
columns表格列的配置描述，具体项见下表Array-
dataSource数据数组Array-
direction排列方式 horizon/vetical/mixStringhorizon
scrollX是否横向滚动Booleanfalse
titleFixed横向滚动时，标题列是否固定Booleanfalse

columns

参数说明类型默认值
title列头显示文字String or React.Element
keyReact 需要的 key，建议设置String
dataIndex列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法String
render生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引Function(text, record, index) {}