el-table复杂合并行操作
需求如下图：
使用el-table一顿操作猛如虎，发现官网文档写的不知道是些啥，demo也让人有点摸不着头脑，看了网上的一些合并表格的例子，都没怎么看懂，于是在此捋一下自己的思路。
首先分析这样的表格应该如何处理，这里是比较简单的合并某几项数据中某几列，因此要对比出当前数据中有几项的某个值是相同的，这里拿name举例，解析步骤：
①遍历表格数据，用一个变量（此例为spanArr）记录每一行的rowspan和colspan
②判断前后两项的name相同，后面那一项的rowspan和colspan都设为0
③找到name相同的第一项，rowspan值+1
④前后不相同的项rowspan和colspan设置默认值
这个例子应对的业务需要后端配合将相同数据排列至一起，如果数据不按顺序排列，就需要先对数据进行重新排列，然后再使用这种方式去合并就可以了，具体代码如下：
<template>
<div class="inventoryTable">
<el-table
:data="tableData"
:span-method="mergeTableSpanMethod"
border
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="id"
label="原料编号"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="提醒">
</el-table-column>
<el-table-column
prop="name"
label="原料名称">
</el-table-column>
<el-table-column
prop="amount2"
label="原料类型">
</el-table-column>
<el-table-column
prop="amount3"
label="单位">
</el-table-column>
<el-table-column
prop="amount3"
label="规格">
</el-table-column>
<el-table-column
prop="amount3"
label="库存总量">
</el-table-column>
<el-table-column
prop="amount3"
label="冻结库存">
</el-table-column>
<el-table-column
prop="amount3"
label="可用库存">
</el-table-column>
<el-table-column
prop="amount3"
label="安全库存">
</el-table-column>
<el-table-column
prop="amount3"
label="入库均价">
</el-table-column>
<el-table-column
prop="amount3"
label="入库成本">
</el-table-column>
<el-table-column
prop="amount3"
label="市价值">
</el-table-column>
<el-table-column
prop="amount3"
width="150"
label="库存成本总额">
</el-table-column>
<el-table-column
prop="amount3"
label="库存总额">
</el-table-column>
<el-table-column
prop="amount3"
width="150"
label="生产日期">
</el-table-column>
<el-table-column
prop="amount3"
width="150"
label="到期提醒">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "inventoryTable",
data() {
return {
spanArr: [], // 存放表格日期单元格的rowspan和colspan信息
tableData: [{ // 表数据
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '张晓松',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '12987126',
name: '张晓松',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '12987126',
name: '张晓松',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
}
},
mounted() {
this.spanArr = this.getSpanData();
},
methods: {
// 遍历分析表格数据 记录每一行的rowspan和colspan
getSpanData() {
let spanArr = [];
for (let i = 0; i < this.tableData.length; i++) {
let obj = {};
if (i === 0) {
// 第一项直接设置默认的值
obj.rowspan = 1;
obj.colspan = 1;
spanArr.push(obj);
} else {
if (this.tableData[i].name === this.tableData[i - 1].name) {
// 前后两项的name相同 后面那一项rowspan和colspan都设置为0
obj.rowspan = 0;
obj.colspan = 0;
spanArr.push(obj);
// 找到name相同项中第一项 rowspan值加1
let index = this.tableData.findIndex((item) => item.name === this.tableData[i].name);
++spanArr[index].rowspan;
} else {
// 前后不相同 一个新的值 设置默认值就好
obj.rowspan = 1;
obj.colspan = 1;
spanArr.push(obj);
}
}
}
return spanArr;
},
// 合并表格
mergeTableSpanMethod({row, column, rowIndex, columnIndex}) {
// row:行对象，带有一行所有数据，column:列对象
// rowIndex:行索引，columnIndex:列索引
// 加载表格时从（0，0）开始，（0，1）···（1，0）,(1,1)···依次获取数据
// 需要合并行的列都列出来
if (columnIndex === 1 || columnIndex === 3 || columnIndex === 4 ||
columnIndex === 5 || columnIndex === 6 || columnIndex === 7 ||
columnIndex === 8 || columnIndex === 10 || columnIndex === 13) {
let rowspan = this.spanArr[rowIndex].rowspan;
let colspan = this.spanArr[rowIndex].colspan;
return {rowspan, colspan};
}
},
}
}
</script>
<style scoped>
</style>
