Taro模拟table表格搭配react实现方式

手机端使用表格场景较少。本文基础框架介绍：

• taro：2.1.3
• react：16.9.31（本文使用类组件）
• css：stylus（和less、scss类似写法不一样）

父组件调用：仅供参考，详见子组件

// 组件
import Taro, { Component } from '@tarojs/taro'
import { Image, View } from '@tarojs/components'
import CustomTable from "@/components/CustomTable/CustomTable";
// styl
import './repairEndReport.styl'class RepairEndReport extends Component {constructor(props) {super(props);}// eslint-disable-next-line react/sort-compstatic options = {addGlobalClass: true};config = {navigationBarTitleText: '维修完结报告',}state = {detail: {},// 示例一 图片 视频columnsFault: [{title: '收货图片',dataIndex: 'arrivalExplainImages',width: '510',},{title: '修复前图片',dataIndex: 'machineRepairUrl',width: '510',}],dataSourceFault: [{"arrivalExplainImages": ["https://img2.baidu.com/it/u=3094149767,177600321&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", "https://img2.baidu.com/it/u=1035356506,3713698341&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", "https://vd3.bdstatic.com/mda-kifgkdfisjk3skwi/hd/cae_h264_nowatermark/mda-kifgkdfisjk3skwi.mp4"],"machineRepairUrl": ["https://img0.baidu.com/it/u=236085137,1979895699&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360","https://img2.baidu.com/it/u=1527638636,152745451&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500"]}],// 示例二 文字columnsRepair: [{title: '序号',dataIndex: 'index',width: '100'},{title: '异常现象',dataIndex: 'anomalyList',width: '350'},{title: '故障点',dataIndex: 'textList',width: '350'},{title: '维修内容',dataIndex: 'repairContentList',width: '350'},],dataSourceRepair: [{"index":1,"anomalyList":["开机无反应/间接反应","跳闸","其他（这是大其他）"],"textList":["定转子烧毁","开关无法通电/接触不良","控制板坏了","其他（1112）","内部漏电","其他（333）","其他（6666）"],"repairContentList":["更换定转子","更换控制板","其他（222）","更换漏电配件","其他（444）","其他（77777）"]},{"index":2,"anomalyList":["开机无反应/间接反应","跳闸","其他（这是大其他）"],"textList":["定转子烧毁","开关无法通电/接触不良","控制板坏了","其他（1112）","内部漏电","其他（333）","其他（6666）"],"repairContentList":["更换定转子","更换控制板","其他（222）","更换漏电配件","其他（444）","其他（77777）"]}],}render() {const { columnsFault, columnsRepair, dataSourceFault, dataSourceRepair } = this.state;return (示例一：图片视频columnsFault}dataSource={dataSourceFault}/>示例二：文案列表columnsRepair}dataSource={dataSourceRepair}/>)}
}export default RepairEndReport

子组件表格 - jsx 部分

/* eslint-disable */
import { Text, Video, View } from '@tarojs/components';
import { Component } from '@tarojs/taro';
// styl
import './CustomTable.styl';export default class CustomTable extends Component {constructor(props) {super(props);}// 是否加载全局cssstatic options = {addGlobalClass: true};// 判断 数组类型checkItemType(item) {if (/\.(mp4|mov|ogm|wmv|asx|mpg|webm|ogv|mpeg|m4v|avi)$/.test(item)) {return 'video'} else if (/\.(png|jpg|gif|svg|webp|jpeg|bmp|tiff)$/.test(item)) {return 'img'} else {return 'text'}}// 点击图片看大图onTapImage(current, urls) {Taro.previewImage({urls,current});}render() {const { columns = [], dataSource = [] } = this.props// 重新计算 列表数据 匹配表头const newDataSource = dataSource.map(itemTr => {return columns.map(itemTd => {const newData = Array.isArray(itemTr[itemTd.dataIndex]) ? itemTr[itemTd.dataIndex] : [itemTr[itemTd.dataIndex] || ''];return {...itemTd,data: newData,type: this.checkItemType(newData[0]),}})})// 计算每列的宽度let tableWidth = 0;columns.map(i => tableWidth += parseFloat(i.width))return ({'width': tableWidth ? tableWidth + 'rpx' : '100%'}}>{/* 渲染表头 */}{columns.map((item, index) => ({'width': item.width ? item.width + 'rpx' : 'auto'}} key={`tableData-columns${index}`}>{item.title}))}{/* 表格 body */}{newDataSource.length > 0 ? newDataSource.map((itemTr, indexTr) => (// 模拟tr`dataSource${indexTr}`} className='custom-table-body flex-row-between-start fs-28 c-333'>{/* 模拟 td */}{itemTr.map((itemTd, idxTd) => (`tableDataItem fs-28`} key={`tableData-itemTd${indexTr}-${idxTd}`} style={{'width': itemTd.width ? itemTd.width + 'rpx' : 'auto'}}>{/* 模拟每个td里面多个图片或者视频 */}{itemTd.data.map((item, idx) => (this.checkItemType(item) === 'img' ? (`tableData-itemTd-item-${indexTr}-${idxTd}-${idx}`}className='image-video'src={item}onTap={() => this.onTapImage(item, itemTd.data)}/>) : this.checkItemType(item) === 'video' ? (`tableData-itemTd-item-${indexTr}-${idxTd}-${idx}`}className='image-video'src={item}/>) : ({item})))}))})) : (暂无数据)})}
}

子组件表格 - 样式 部分

.custom-tablebackground: #fffoverflow-x: auto;.flex-row-start-centerdisplay flexjustify-content flex-startalign-items centerflex-direction row.custom-table-headerheight: 78px;line-height: 78px;background: #F6F6F6;border-radius: 8px 0px 0px 8px;.custom-table-bodyline-height: 78px;background: #fff;.tableDataItemmin-width: 50pxpadding: 0 16px.image-videowidth: 154pxheight: 154pxborder-radius: 9pxmargin 15px 15px 15px 0

效果：

备注提示：

• 表头数组匹配数组中dataIndex对应的每个td的key
• 列表数据在使用时候重构了下内容。解决直接tbody内容使用columns时，渲染报错问题。原因未详查，无未遇到可不重构
• 为了表格上下统一宽度，建议配置每个columns中的td宽度
• 当有视频图片时，可以自动根据子元素视频图片个数计算宽度，有兴趣可以研究下