需求
常常有这样的需求我需要展示一个表格，但是其中某列或某几列可能要根据不同的场景显示不同的列名，例如下面的表格其中两列的列名需要在不同类型下分别显示“装运数量”，“装运重量”和“未执行数量”，“未执行重量”
const registerTableColumns=[
{ field: 'shipmentDate', title: '单据日期', minWidth: 120 },
{ field: 'loadingSequenceNo', title: '装运单号', minWidth: 160 },
{ field: 'shipmentTime', title: '装运日期', minWidth: 120 },
{ field: 'estimatedArrivalTime', title: '预计到货日期', minWidth: 140 },
{ field: 'supplierName', title: '供应商', minWidth: 140 },
{ field: 'itemExtendedField4', title: '计划编号', minWidth: 140 },
{ field: 'breed', title: '品名', minWidth: 120 },
{ field: 'material', title: '材质', minWidth: 100 },
{ field: 'specName', title: '规格', minWidth: 90 },
{ field: 'length', title: '长度', minWidth: 80 },
{ field: 'steel', title: '品牌', minWidth: 90 },
{ field: 'weightUnit', title: '单位', minWidth: 80 },
{ field: 'warehouseName', title: '提货仓库', minWidth: 90 },
{ field: 'weightType', title: '计重方式', minWidth: 90 },
{ field: 'realQuantity', title: '装运数量', minWidth: 100, showSum: 'num' },
{ field: 'realWeight', title: '装运重量', minWidth: 100, showSum: 'weight' },
{ field: 'num', title: '入库数量', minWidth: 100, showSum: 'num' },
{ field: 'averageWeight', title: '件重', minWidth: 80 },
{ field: 'weight', title: '入库重量', minWidth: 100, showSum: 'weight' },
{ field: 'salePrice', title: '采购单价', width: 120 },
{ field: 'saleAmount', title: '采购金额', width: 130, showSum: 'amount' },
{ field: 'notNum', title: '未入库数量', minWidth: 100, showSum: 'num' },
{ field: 'notWeight', title: '未入库重量', minWidth: 100, showSum: 'weight' },
{ field: 'vesselNo', title: '车牌号', minWidth: 120 },
{ field: 'carrierName', title: '承运单位', minWidth: 120 },
{ field: 'deliveryDriver', title: '派送司机', minWidth: 100 },
{ field: 'driverPhone', title: '司机电话', minWidth: 120 },
{ field: 'psAddress', title: '配送地址', minWidth: 260 },
{ field: 'contactor', title: '联系人', minWidth: 100 },
{ field: 'contactPhone', title: '联系电话', minWidth: 120 },
]
粗暴的方法是直接通过下标修改，或者循环找出title名是装运数量和装运重量的然后对应修改，这样做要麽不通用要麽时间复杂度高，下面是一个小技巧，首先是封装的通用方法，根据传入的attr不同可以修改不同的属性
export function changeTableColumn(tableColums, beforeColumn, afterColumn, attr='title'){
tableColums.forEach(item=>{
if(item[attr]==beforeColumn[item[attr]]){
item[attr]=afterColumn[item[attr]])
}
})
return tableColums
}
调用
computed: {
newTableColumns(){
const beforeColumn={
装运数量:'装运数量',
装运重量:'装运重量'
}
const afterColumn={
装运数量:'未执行数量',
装运重量:'未执行重量'
}
const tableColumns=deepClone(registerTableColumns)
return this.params.orderType ==20 ? changeTableColumn(tableColumns,beforeColumn,afterColumn) : tableColumns
}
}
这样可以一次性改变多列只要在beforeColumn和afterColumn添加即可
