使用技术
效果图
实现代码
<template>
<div class="shipping-level">
<Table class="g-table" :columns="tableColumns" :data="tableData" border :loading="loading">
<template slot="customerLevel" slot-scope="{ row }">
<span class="text">{{ row.customerLevel }}</span>
</template>
<template
:slot="item.slot"
slot-scope="{ row }"
v-for="(item, i) in tableColumns.filter(item => !['customerLevel', 'action'].includes(item.slot))"
>
<span class="text" :key="i" v-if="true">{{ row[item.slot] }}</span>
</template>
<template slot="action" slot-scope="{ row }">
<a class="operate"> 编辑 </a>
<a class="operate"> 操作记录 </a>
</template>
</Table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
containerTypeList: ['20GP', '40GP', '40HQ', '40NOR', '45HQ'],
tableColumns: [],
}
},
mounted() {
this.initData()
},
methods: {
async initData() {
this.tableColumns = this.transformColumns(this.containerTypeList)
// 模拟数据
const resData = [
{
"customerLevel": "A1",
"containerPrice": [
{
"priceId": "1805784232757305412",
"containerType": "20GP",
"increasePrice": 12
},
{
"priceId": "1805784232757305419",
"containerType": "40GP",
"increasePrice": 22
},
{
"priceId": "1805784232757305426",
"containerType": "40HQ",
"increasePrice": 320
},
{
"priceId": "1805784232757305433",
"containerType": "40NOR",
"increasePrice": 420
},
{
"priceId": "1805784232757305440",
"containerType": "45HQ",
"increasePrice": 520
}
]
},
{
"customerLevel": "A2",
"containerPrice": [
{
"priceId": "1805784232757305413",
"containerType": "20GP",
"increasePrice": 122
},
{
"priceId": "1805784232757305420",
"containerType": "40GP",
"increasePrice": 144
},
{
"priceId": "1805784232757305427",
"containerType": "40HQ",
"increasePrice": 155
},
{
"priceId": "1805784232757305434",
"containerType": "40NOR",
"increasePrice": 166
},
{
"priceId": "1805784232757305441",
"containerType": "45HQ",
"increasePrice": 177
}
]
},
{
"customerLevel": "A3",
"containerPrice": [
{
"priceId": "1805784232757305414",
"containerType": "20GP",
"increasePrice": 0
},
{
"priceId": "1805784232757305421",
"containerType": "40GP",
"increasePrice": 0
},
{
"priceId": "1805784232757305428",
"containerType": "40HQ",
"increasePrice": 0
},
{
"priceId": "1805784232757305435",
"containerType": "40NOR",
"increasePrice": 0
},
{
"priceId": "1805784232757305442",
"containerType": "45HQ",
"increasePrice": 0
}
]
},
{
"customerLevel": "A4",
"containerPrice": [
{
"priceId": "1805784232757305415",
"containerType": "20GP",
"increasePrice": 99
},
{
"priceId": "1805784232757305422",
"containerType": "40GP",
"increasePrice": 20
},
{
"priceId": "1805784232757305429",
"containerType": "40HQ",
"increasePrice": 55
},
{
"priceId": "1805784232757305436",
"containerType": "40NOR",
"increasePrice": 55
},
{
"priceId": "1805784232757305443",
"containerType": "45HQ",
"increasePrice": 55
}
]
},
{
"customerLevel": "B",
"containerPrice": [
{
"priceId": "1805784232757305416",
"containerType": "20GP",
"increasePrice": 0
},
{
"priceId": "1805784232757305423",
"containerType": "40GP",
"increasePrice": 0
},
{
"priceId": "1805784232757305430",
"containerType": "40HQ",
"increasePrice": 0
},
{
"priceId": "1805784232757305437",
"containerType": "40NOR",
"increasePrice": 333
},
{
"priceId": "1805784232757305444",
"containerType": "45HQ",
"increasePrice": 0
}
]
},
{
"customerLevel": "C",
"containerPrice": [
{
"priceId": "1805784232757305417",
"containerType": "20GP",
"increasePrice": 30
},
{
"priceId": "1805784232757305424",
"containerType": "40GP",
"increasePrice": 40
},
{
"priceId": "1805784232757305431",
"containerType": "40HQ",
"increasePrice": 50
},
{
"priceId": "1805784232757305438",
"containerType": "40NOR",
"increasePrice": 60
},
{
"priceId": "1805784232757305445",
"containerType": "45HQ",
"increasePrice": 70
}
]
},
{
"customerLevel": "D",
"containerPrice": [
{
"priceId": "1805784232757305418",
"containerType": "20GP",
"increasePrice": 11
},
{
"priceId": "1805784232757305425",
"containerType": "40GP",
"increasePrice": 22
},
{
"priceId": "1805784232757305432",
"containerType": "40HQ",
"increasePrice": 33
},
{
"priceId": "1805784232757305439",
"containerType": "40NOR",
"increasePrice": 44
},
{
"priceId": "1805784232757305446",
"containerType": "45HQ",
"increasePrice": 55
}
]
}
]
this.tableData = this.arrToRes(resData ?? [])
},
// 转换表格
transformColumns(arr) {
let columns = []
arr.forEach(v => {
columns.push({
title: v,
slot: v,
align: 'center'
})
})
return [
{
title: '客户等级/柜型',
slot: 'customerLevel',
width: 140,
align: 'center',
},
...columns,
{
title: '操作',
slot: 'action',
width: 150,
align: 'center',
fixed: 'right',
},
]
},
// 将回显的数据转换成所需表格数组
arrToRes(arr) {
let arrTemp = []
for (let i = 0; i < arr.length; i++) {
let obj = {}
if (arr[i].containerPrice.length > 0) {
arr[i].containerPrice.forEach((item) => {
obj[item.containerType] = item.increasePrice
})
}
arrTemp[i] = Object.assign({}, { ...arr[i] }, obj)
}
return arrTemp
},
},
}
</script>
<style lang="less" scoped>
.shipping-level {
height: 100%;
padding: 20px;
background: #fff;
.operate {
color: #1890ff;
font-weight: normal;
cursor: pointer;
margin-right: 15px;
}
/deep/.ivu-table-wrapper-with-border {
border-bottom: 1px solid #dddee1;
border-right: 1px solid #dddee1;
}
/deep/.ivu-table-border th,
/deep/.ivu-table-border td {
border-right: none;
}
}
</style>
