这篇文章主要讲element ui中动态表格的渲染,合计行放在表格第一行,以及设置第一行样式的问题,都是比较简单的问题,但是开发中经常遇到,算是做个记录
一、动态表格
1动态表格,如下图,红色部分是动态渲染的列
2下面是造的数据结构:list 是后台返回的数据,我们要对list进行拆分
let list = [
{
"id":1,"sku":"123","version":'v20210902001',state:'已确认',
"itemVOList":[{"planDate":"2021-09-01","planQty":1},{"planDate":"2021-09-02","planQty":2},{"planDate":"2021-09-03","planQty":3},{"planDate":"2021-09-04","planQty":99},{"planDate":"2021-09-05","planQty":1},{"planDate":"2021-09-06","planQty":2},{"planDate":"2021-09-07","planQty":3}]
},
{
"id":2,"sku":"123","version":'v20210902002',state:'未确认',
"itemVOList":[{"planDate":"2021-09-01","planQty":4},{"planDate":"2021-09-02","planQty":5},{"planDate":"2021-09-03","planQty":6},{"planDate":"2021-09-04","planQty":99},{"planDate":"2021-09-05","planQty":1},{"planDate":"2021-09-06","planQty":2},{"planDate":"2021-09-07","planQty":3}]
},
{
"id":3,"sku":"123","version":'v20210902003',state:'未确认',
"itemVOList":[{"planDate":"2021-09-01","planQty":7},{"planDate":"2021-09-02","planQty":8},{"planDate":"2021-09-03","planQty":9},{"planDate":"2021-09-04","planQty":99},{"planDate":"2021-09-05","planQty":1},{"planDate":"2021-09-06","planQty":2},{"planDate":"2021-09-07","planQty":3}]
},
{
"id":4,"sku":"123","version":'v20210902003',state:'未确认',
"itemVOList":[{"planDate":"2021-09-01","planQty":71},{"planDate":"2021-09-02","planQty":81},{"planDate":"2021-09-03","planQty":91},{"planDate":"2021-09-04","planQty":99},{"planDate":"2021-09-05","planQty":1},{"planDate":"2021-09-06","planQty":2},{"planDate":"2021-09-07","planQty":3}]
}
]
tableData = list.map(item => {
let arr = item.itemVOList
arr.forEach(it => {
item[it.planDate] = {} // 将日期做 key 挂载在 tableData 列表外层
item[it.planDate].planQty = it.planQty
})
return item
})
let timeArrList = list[0].itemVOList
for (const it of timeArrList) { // 取数据第一项的 itemVOList 属性值 遍历取 planDate 做表头
let obj = {props:it.planDate, label: it.planDate}
tableColumn.push(obj)
}
this.tableColumn = tableColumn
this.tableData = tableData
3html结构如下
<el-table :data="tableData" >
<el-table-column
prop="version"
label="版本"
align="center"
min-width="150"
>
</el-table-column>
<el-table-column prop="state" label="状态" align="center" min-width="140">
</el-table-column>
<el-table-column prop="sku" label="SKU" align="center" min-width="140">
</el-table-column>
// 以下是循环渲染部分
<el-table-column v-for="(item, index) in tableColumn" :key="index" align="center" min-width="120">
<template slot="header">
<span>{{item.label}}</span>
</template>
<template slot-scope="scope">
<el-input v-if="scope.row.editing" size="mini" v-model="scope.row[item.props].planQty"></el-input>
<span v-else>{{scope.row[item.props].planQty}}</span>
</template>
</el-table-column>
</el-table>