在项目开发过程，难以避免会有表格动态合并行或列的需求，Elemnent 官网的 demo 是针对静态情况合并的，并不符合我们大部分人的动态需求，故今天整理出一份，我业务逻辑代码里如何处理表格动态合并的资料,
<div id="app">
<el-table :data="tableData" :span-method="handleSameMerge" style="width: 100%">
<el-table-column label="序号" width="80">
<template slot-scope="scope">{{scope.$index}}</template>
</el-table-column>
<el-table-column prop="class_label" label="渠道分类" width="180">
</el-table-column>
<el-table-column prop="source_label" label="渠道来源" width="180">
</el-table-column>
</el-table>
</div>
<script>
new Vue({
el: '#app',
data: {
tableData: [],
tempIndex: [],
list: [
{
id: 1,
class_code: 1,
class_label: '媒体',
created_at: null,
updated_at: null,
source: [
{
id: 1,
source_code: 31,
source_label: '电视媒体',
created_at: null,
updated_at: null,
class_code: '1'
},
{
id: 17,
source_code: 16,
source_label: '地铁广告',
created_at: null,
updated_at: null,
class_code: '1'
}
]
},
{
id: 2,
class_code: 1,
class_label: 'hhh',
created_at: null,
updated_at: null,
source: [
{
id: 1,
source_code: 31,
source_label: 'test1',
created_at: null,
updated_at: null,
class_code: '1'
},
{
id: 17,
source_code: 16,
source_label: 'test2',
created_at: null,
updated_at: null,
class_code: '1'
},
{
id: 17,
source_code: 16,
source_label: 'test3',
created_at: null,
updated_at: null,
class_code: '1'
},
{
id: 17,
source_code: 16,
source_label: 'test4',
created_at: null,
updated_at: null,
class_code: '1'
}
]
},
{
id: 4,
class_code: 1,
class_label: 'shiyixia',
created_at: null,
updated_at: null
}
]
},
watch: {
list: {
handler(nv) {
let arr = [];
let tempMergeIndex = [];
let pos;
nv.forEach((item, i) => {
if (item.source && item.source.length) {
let sourceArr = item.source.map(_ => {
return {
..._,
flag: i + '',
class_label: item.class_label
};
});
arr.push(...sourceArr);
} else {
arr.push(item);
}
});
this.tableData = arr;
// 处理arr，生成一个与行数相同的数组记录每一行设置的合并数
for (let i = 0; i < arr.length; i++) {
if (i === 0) {
tempMergeIndex.push(1);
pos = 0;
} else {
if (arr[i].flag && (arr[i].flag === arr[i - 1].flag)) {
tempMergeIndex[pos] += 1;
tempMergeIndex.push(0);
} else {
tempMergeIndex.push(1);
pos = i;
}
}
}
this.tempIndex = tempMergeIndex;
},
deep: true,
immediate: true
}
},
methods: {
// 从 tempIndex 获取当前 row 需要合并的行数
handleSameMerge({row, column, rowIndex, columnIndex}) {
if (columnIndex === 1) {
return {
rowspan: this.tempIndex[rowIndex],
colspan: 1
};
}
}
}
});
</script>
