Taro simulates table form with react implementation
Tables are rarely used on mobile phones. Introduction to the basic framework of this article:
- taro：2.1.3
- react : 16.9.31 (this article uses class components)
- css : stylus (different from less and scss similar writing)
Parent component call: for reference only, see subcomponents for details
// 组件
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-comp
static 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 (
<View className='repairEndReport fs-28'>
<View className='boxview m-t-18'>
<View className='c-333'>示例一：图片视频</View>
<CustomTable
columns={
columnsFault}
dataSource={
dataSourceFault}
/>
</View>
<View className='boxview m-t-18'>
<View className='c-333'>示例二：文案列表</View>
<CustomTable
columns={
columnsRepair}
dataSource={
dataSourceRepair}
/>
</View>
</View>
)
}
}
export default RepairEndReport
Subcomponent Form - jsx section
/* 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);
}
// 是否加载全局css
static 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 (
<View className='custom-table m-t-20'>
<View style={
{
'width': tableWidth ? tableWidth + 'rpx' : '100%'}}>
{
/* 渲染表头 */}
<View className='custom-table-header flex-row-between-center fs-26 c-666 bold'>
{
columns.map((item, index) => (
<View className='flex-row-start-center tableDataItem' style={
{
'width': item.width ? item.width + 'rpx' : 'auto'}} key={
`tableData-columns${
index}`}>{
item.title}</View>
))}
</View>
{
/* 表格 body */}
{
newDataSource.length > 0 ? newDataSource.map((itemTr, indexTr) => (
// 模拟tr
<View key={
`dataSource${
indexTr}`} className='custom-table-body flex-row-between-start fs-28 c-333'>
{
/* 模拟 td */}
{
itemTr.map((itemTd, idxTd) => (
<View className={
`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' ? (
<Image
key={
`tableData-itemTd-item-${
indexTr}-${
idxTd}-${
idx}`}
className='image-video'
src={
item}
onTap={
() => this.onTapImage(item, itemTd.data)}
/>
) : this.checkItemType(item) === 'video' ? (
<Video
key={
`tableData-itemTd-item-${
indexTr}-${
idxTd}-${
idx}`}
className='image-video'
src={
item}
/>
) : (
<View>{
item}</View>
)
))}
</View>
))}
</View>
)) : (
<View className='custom-table-body flex-row-center-center fs-28'>暂无数据</View>
)}
</View>
</View>
)
}
}
Subcomponent Table - Style Section
.custom-table
background: #fff
overflow-x: auto;
.flex-row-start-center
display flex
justify-content flex-start
align-items center
flex-direction row
.custom-table-header
height: 78px;
line-height: 78px;
background: #F6F6F6;
border-radius: 8px 0px 0px 8px;
.custom-table-body
line-height: 78px;
background: #fff;
.tableDataItem
min-width: 50px
padding: 0 16px
.image-video
width: 154px
height: 154px
border-radius: 9px
margin 15px 15px 15px 0
Effect:
Remarks:
- The header array matches the key of each td corresponding to the dataIndex in the array
- The list data is reconstructed as follows when used. Solve the problem of rendering errors when using columns directly for tbody content. The reason has not been investigated in detail, and if there is no encounter, it can be refactored
- In order to unify the width of the table up and down, it is recommended to configure the td width in each column
- When there are video pictures, the width can be automatically calculated according to the number of sub-element video pictures. If you are interested, you can study it