前言：
对原生的table进行封装，让他满足我们一行显示不同个的需求。
实现效果：如图所示，一行显示不同数量的内容
实现代码：
1、封装的组件：custom_table.vue，源码看下面
（1）一行显示几个td
(2)表头数据，表格数据
（3）js封装核心方法
2、调用方法：有form是为了必填的*效果，可根据实际情况增删
<Form :model="orderDetail" label-position="left" :label-width="120">
<!--<Card style="margin-bottom: 20px;">-->
<custom_table :tableObj="tableObj1" :orderList="orderDetail"></custom_table>
</Form>
3、data里面定义的参数
//订单编号自定义列表
tableObj1:[
{
title:'订单编号', //表头名称
key:'orderSn', //表头对应取数据的字段
},{
title:'外部订单编号',
key:'sourceOrderSn',
},{
title:'订单类型',
key:'type',
enumFilter:'OrderTypeEnum' //全局的filter过滤方法
},{
title:'订单状态',
key:'status',
enumFilter:'OrderStatusEnum'
},{
title:'所属组织',
key:'merchantName',
},{
title:'所属店铺',
key:'shopName',
},{
title:'销售渠道',
key:'platform',
},{
title:'订单来源',
key:'source',
},{
title:'配送方式',
key:'deliveryType',
},{
title:'逻辑仓',
key:'logicName',
},{
title:'物理仓',
key:'physicName',
},{
title:'期望到货时间',
key:'expectedDeliveryTime',
},{
title:'创建人',
key:'createUser',
},{
title:'销售员',
key:'saleUser',
},{
title:'快递',
key:'expressName',
col:'2' //合并
}
],
//所有的数据
orderDetail: {
orderSn:'111'
},
封装组件源码：custom_table.vue
<template>
<!--类型一：-->
<table class="comTable" v-if="uploadCustomTable">
<tr v-for="(trItem,trIndex) in tableColumn" :key="'custom_tr_'+trIndex">
<td v-for="(tdItem,tdIndex) in trItem" :colspan="tdItem.col?tdItem.col:1" :key="'custom_td_'+tdIndex" >
<FormItem :label="tdItem.title + '：'">
<p v-if="orderDetail[tdItem.key] && tdItem.enumFilter">{{ orderDetail[tdItem.key] | enumFilter(tdItem.enumFilter) }}</p>
<p v-if="orderDetail[tdItem.key] && !tdItem.enumFilter">{{ orderDetail[tdItem.key] }}</p>
<p v-if="!orderDetail[tdItem.key] && orderDetail[tdItem.key] === 0">{{orderDetail[tdItem.key]}}</p>
<p v-if="!orderDetail[tdItem.key] && orderDetail[tdItem.key] !== 0"> -- </p>
</FormItem>
</td>
</tr>
</table>
</template>
<script>
export default {
props: {
//表头一行展示多少个
custom_table_col_num:{
type: String,
default:'4'
},
/**
* 自定义表格-表头数据
[
{
title:'订单编号', //表头数据
key:'orderSn', //表头字段
col:'2' //合并数量
}
]
* */
tableObj:{
type:Array,
default:()=>{
return []
}
},
//列表数据
orderList:{
type:Object,
default:()=>{
return {}
}
}
},
watch: {
//自定义表头数据
tableObj: {
handler: "setTableCol",
immediate: true,
},
//自定义表格数据
orderList: {
handler: "setTableList",
immediate: true,
},
},
data() {
return {
uploadCustomTable:true,
orderDetail: {},
tableColumn:[], //表头数据
}
},
methods: {
//处理表头数据
setTableCol(arr){
let all_arr = [] //总数据
arr.forEach((item,index)=>{
item.index = index
if(item.col){
//合并内容
for(let i=0; i< +item.col;i++){
all_arr.push(item)
}
}else{
all_arr.push(item)
}
})
let allData = []; //用来装处理完的数组
let currData = []; //子数组用来存分割完的数据
let now_num = this.custom_table_col_num
for(var i = 0; i < all_arr.length; i++) {
currData.push(all_arr[i]);
if((i != 0 && (i + 1) % now_num == 0) || i == all_arr.length - 1) {
allData.push(currData);
currData = [];
}
}
//去重更新数据
allData.forEach(item=>{
let oldArr = item
let newArr = this.unique(oldArr,'index')
this.tableColumn.push(newArr)
})
},
//更新表格数据
setTableList(obj){
this.orderDetail = obj
this.uploadCustomTable = false
this.$nextTick(()=>{
this.uploadCustomTable = true
})
},
/**
* 根据数组对象的某个字段去重
* item.name 是[{name:1}] 根据每条数据的name值来去重
* */
unique(arr,val) {
const res = new Map();
return arr.filter(item => !res.has(item[val]) && res.set(item[val], 1))
},
}
}
</script>
<style lang='less' scoped>
.comTable {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
td, th {
border: 1px solid #ccc;
}
tr {
width: 100%;
p {
padding-left: 3px;
background: #F7F7FB;
height: 34px;
}
}
}
</style>
