vue + Element UI table动态合并单元格
一、功能需求
1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）
2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）
二、功能实现
<template>
<div class="effect">
<el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod">
<el-table-column type="index" label="序号" align="center" width="180">
</el-table-column>
<el-table-column prop="name" label="工作阶段" align="center" min-width="180">
</el-table-column>
<el-table-column prop="address" label="主要任务" align="center" min-width="180">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [
{
name: 'a',
address: '1',
age:'1',
six:'2'
},
{
name: 'a',
address: '1',
age:'1',
six:'2'
},
{
name: 'a',
address: '1',
age:'1',
six:'2'
},
{
name: 'a',
address: '1',
age:'1',
six:'2'
},
{
name: 'a',
address: '2',
age:'1',
six:'2'
},
{
name: 'a',
address: '2',
age:'1',
six:'1'
},
{
name: 'a',
address: '3',
age:'1',
six:'1'
},
{
name: 'a',
address: '3',
age:'1',
six:'1'
},
{
name: 'b',
address: '3',
age:'1',
six:'1'
},
{
name: 'b',
address: '3',
age:'1',
six:'1'
},
{
name: 'b',
address: '3',
age:'1',
six:'1'
},
{
name: 'b',
address: '4',
age:'1',
six:'1'
},
{
name: 'b',
address: '4',
age:'1',
six:'1'
},
{
name: 'b',
address: '5',
age:'2',
six:'1'
},
{
name: 'b',
address: '5',
age:'',
six:''
},
]
}
},
mounted () {
// 处理第二列的合并
for (let i = 0; i < this.tableData.length; i++) {
//第一个单元格合并列为1
this.tableData[i].nameSpan = 1
//和后面值的比较，
for (let j = i+1; j < this.tableData.length; j++) {
//如果值一样，则合并列为+1
if(this.tableData[i].name != this.tableData[j].name){
//如果遇到值不一样，则将 i = k -1 因为 下次循环i会+1
i = j-1
// 结束循环
break;
}else{
this.tableData[i].nameSpan += 1
// 最后一行了,将k的值赋给i,结束循环
if(j == this.tableData.length-1){
i = j
// 结束循环
break;
}
}
}
}
// 处理第三列的合并
for (let i = 0; i < this.tableData.length; i++) {
//第一个单元格合并列为1
this.tableData[i].addressSpan = 1
//和后面值的比较，
for (let k = i+1; k < this.tableData.length; k++) {
//如果值一样，则合并列为+1
if(this.tableData[i].address == this.tableData[k].address && this.tableData[i].name == this.tableData[k].name){
this.tableData[i].addressSpan += 1
// 最后一行了,将k的值赋给i,结束循环
if(k == this.tableData.length-1){
i = k
// 结束循环
break;
}
}else{
//如果遇到值不一样，则将 i = k -1 因为 下次循环i会+1
i = k-1
// 结束循环
break;
}
}
}
// 处理第四列和第五列横向合并
for (let i = 0; i < this.tableData.length; i++) {
this.tableData[i].ageColspan = 1
if(this.tableData[i].age && this.tableData[i].six && this.tableData[i].age == this.tableData[i].six){
this.tableData[i].ageColspan += 1
}
}
console.log(this.tableData);
},
methods: {
//合并方法
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
return {rowspan:row.nameSpan,colspan: 1}
}
if (columnIndex === 2) {
return {rowspan:row.addressSpan,colspan: 1}
}
if (columnIndex === 3) {
return {rowspan:1,colspan: row.ageColspan}
}
}
},
}
</script>
<style lang="scss" scoped>
.effect {
width: 100%;
height: calc(100vh - 90px);
padding: 5px;
}
</style>