TableView

表格组件, 支持数据反转

Install

  1. npm install beeshell

示例

  1. import { TableView } from 'beeshell';

1. 默认格式

image

2. 自定义格式, 数据极坐标反转

image

表格数据结构

  1. {
  2.   // tableTitle 是 Key: 表头中文
  3.   tableTitle: {
  4.     title: '基础信息',
  5.     yesterDayExposure: '昨日曝光量',
  6.     yesterDayOrderNum: '昨日订单量',
  7.     deliveryFee: '配送费'
  8.   },
  9.   tableDirection: 'column', // column or row 表格数据方向
  10.   // tableData 是 Key: 表格内容
  11.   tableData: [
  12.     {
  13.       title: '黄焖鸡米饭',
  14.       yesterDayExposure: 456,
  15.       yesterDayOrderNum: 34,
  16.       deliveryFee: 12.01
  17.     },
  18.     {
  19.       title: '刀削面',
  20.       yesterDayExposure: 3443,
  21.       yesterDayOrderNum: 122,
  22.       deliveryFee: 11.00
  23.     },
  24.   ]
  25. }

Usage

1. 默认格式

  1. // constructor
  2. this.state = {
  3.   basicInfo: {
  4.     // 第一个表格
  5.     tableTitle: {
  6.       title: '基础信息',
  7.       yesterDayExposure: '昨日曝光量',
  8.       yesterDayOrderNum: '昨日订单量',
  9.       deliveryFee: '配送费',
  10.       sendPrice: '起送价',
  11.       bussinessOpen: '营业时常',
  12.       fyRate: '非异率',
  13.       tasteScore: '口味评分',
  14.     },
  15.     tableDirection: 'column', // column
  16.     tableData: [
  17.       {
  18.         title: '黄焖鸡米饭',
  19.         yesterDayExposure: 456,
  20.         yesterDayOrderNum: 34,
  21.         deliveryFee: 12.01,
  22.         sendPrice: 33.00,
  23.         bussinessOpen: 12,
  24.         fyRate: 2.3,
  25.         tasteScore: 77,
  26.       },
  27.       {
  28.         title: '刀削面',
  29.         yesterDayExposure: 3443,
  30.         yesterDayOrderNum: 122,
  31.         deliveryFee: 11.00,
  32.         sendPrice: 23.00,
  33.         bussinessOpen: 14,
  34.         fyRate: 2.3,
  35.         tasteScore: 77,
  36.       },
  37.     ],
  38.   }
  39. }
  41. // render
  42. <Tableview
  43.   tableTitle={this.state.basicInfo.tableTitle}
  44.   tableData={this.state.basicInfo.tableData}
  45.   tableDirection={this.state.basicInfo.tableDirection}
  46.   border
  47.   flexArr={[3, 2, 2]}
  48. />

2. 自定义格式, 数据极坐标反转

  1. // constructor
  2. this.state = {
  3.   otherInfo: {
  4.     // 第一个表格
  5.     tableTitle: {
  6.       title: '店名',
  7.       opentime: '营业时间',
  8.       deliveryFee: '配送费',
  9.       rate: '评价',
  10.     },
  11.     tableDirection: 'row', // column
  12.     tableData: [
  13.       {
  14.         title: '黄焖鸡米饭',
  15.         opentime: '09:00-20:00',
  16.         deliveryFee: 11.00,
  17.         rate: 'A',
  18.       },
  19.       {
  20.         title: '小面',
  21.         opentime: '11:00-19:00',
  22.         deliveryFee: 11.20,
  23.         rate: 'B+',
  24.       },
  25.       {
  26.         title: '刀削面',
  27.         opentime: '11:00-20:00',
  28.         deliveryFee: 13.00,
  29.         rate: 'B',
  30.       },
  31.       {
  32.         title: '饺子',
  33.         opentime: '09:00-20:00',
  34.         deliveryFee: 11.00,
  35.         rate: 'A-',
  36.       },
  37.       {
  38.         title: '小龙虾',
  39.         opentime: '11:00-20:00',
  40.         deliveryFee: 12.00,
  41.         rate: 'B',
  42.       },
  43.       {
  44.         title: '牛肉面',
  45.         opentime: '09:00-20:00',
  46.         deliveryFee: 15.00,
  47.         rate: 'A-',
  48.       },
  49.     ],
  50.   }
  51. }
  53. // render
  54. <Tableview
  55.   tableTitle={this.state.otherInfo.tableTitle}
  56.   tableData={this.state.otherInfo.tableData}
  57.   tableDirection={this.state.otherInfo.tableDirection}
  58.   border
  59.   borderColor={'#333333'}
  60.   flexArr={[2, 2, 1, 1]}
  61.   title={'评价情况-表格数据纵向-边框颜色'}
  62. />

Cascader 级联菜单 Attributes

参数 说明 类型 默认值 可选值
tableTitle 表头数据 object tableItem 必填
tableData 表格数据 array[tableItem] tableItem 必填
tableDirection 表格数据显示方向 string column column/row
border 是否显示表格 array[tableItem] true 可选
borderColor 表格颜色 string tableItem 可选
flexArr 各列的相对宽度, 长度要和最大列数一致 array[number] [1…1] 可选
title 表格数据 array[tableItem] tableItem 可选

注意

  • tableTitle 的 tableItem 结构体的 key 的顺序决定了列的先后
  • tableDirection 统一个表格设置不同, 显示效果不同.
  • flexArr 如果不设置,就会按照当前列数自动均分. 如果设置, 必须和列的数量一致, 注意tableDirection表格数据方向

TODO

  • 更多的样式支持, table cell的样式, border 更多的样式