table表数据合并列
效果图
表格合并列.png
- 定义data和methods
data () {
return {
tableList: [],
ecuArr: [], // 合并ECU or 合并RXSWIN子码
ecuIndex: 0, // 合并ECU索 引 or 合并RXSWIN子码
}
},
mounted () {
this.getVSVIDList()
},
methods: {
getDetail (vsvId) {
this.tableList = [
{"ecuRxswin":"LBUA01AA03","ecuName":"DDM","ecuSwPum":"8895632431/D","softwareCompleteHash":"698fe738461b567972b9cc35aff9edeedb18ca92d6d3c243d4401ae6fad105e1"},
{"ecuRxswin":"LBUA01AA03","ecuName":"DDM","ecuSwPum":"8895059909/B","softwareCompleteHash":"d23291c225a3ad558bf8693b6e9c0e8af9103b4406c64f8d1d8b2b4b9d1c1635"},
{"ecuRxswin":"LBUA03AA01","ecuName":"CEM","ecuSwPum":"8894857084/B","softwareCompleteHash":"f6de1cab2e5f97565381ce9f1e6e1b212ee436dce71a059841b38cf4034c9a1f"},
{"ecuRxswin":"LBUA03AA01","ecuName":"CEM","ecuSwPum":"8894857090/B","softwareCompleteHash":"ac8baf457548831d16b91e1f0d1d91719c798b36e8da0a34f4ec273801d67013"},
{"ecuRxswin":"LBUA03AA01","ecuName":"CEM","ecuSwPum":"8895261122/C","softwareCompleteHash":"01d16c7693b32082f4a60e3c5bca3d228515e924bcb395c74a5e2ef84f1c101a"},
{"ecuRxswin":"LBUA04AA01","ecuName":"CEM","ecuSwPum":"8894857084/B","softwareCompleteHash":"f6de1cab2e5f97565381ce9f1e6e1b212ee436dce71a059841b38cf4034c9a1f"},
{"ecuRxswin":"LBUA04AA01","ecuName":"CEM","ecuSwPum":"8894857090/B","softwareCompleteHash":"ac8baf457548831d16b91e1f0d1d91719c798b36e8da0a34f4ec273801d67013"},
{"ecuRxswin":"LBUA04AA01","ecuName":"CEM","ecuSwPum":"8895261122/C","softwareCompleteHash":"01d16c7693b32082f4a60e3c5bca3d228515e924bcb395c74a5e2ef84f1c101a"}
]
this.mergeInit(this.tableList)
},
// 合并表格
mergeInit (data) {
this.ecuArr = [];
this.ecuIndex = 0;
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.ecuArr.push(1);
this.ecuIndex = 0;
} else {
// 合并 RXSWIN子码
if (data[i].ecuRxswin == data[i - 1].ecuRxswin) {
this.ecuArr[this.ecuIndex] += 1;
this.ecuArr.push(0);
} else {
this.ecuArr.push(1);
this.ecuIndex = i;
}
}
}
}
},
// 合并单元格
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
const len = this.tableList.length;
// 第一列 ECU 名称
const _row_1 = this.ecuArr[rowIndex];
const _col_1 = _row_1 > 0 ? 1 : 0;
if (columnIndex === 0) {
return {
rowspan: _row_1,
colspan: _col_1
}
} else if (rowIndex === len) {
return {
rowspan: 1,
colspan: 1
}
}
}
}
- 在文件中使用
<el-table
:data="tableList"
:span-method="arraySpanMethod">
<el-table-column prop="ecuRxswin" label="RXSWIN子码" width="150"></el-table-column>
<el-table-column prop="ecuSwPum" label="ECU软件版本" width="120" show-overflow-tooltip></el-table-column>
</el-table>
