需求：动态添加table数据并合并行
问题：动态添加数据的时候其他属性都可以显示出来，唯独合并那行显示不出来，请教什么问题
<template>
<el-table
class="w-full"
:data="verificationTableData"
border
style=""
:span-method="spanMethod"
:height="'100%'">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="节点名称" prop="nodeName">
<template slot-scope="{ row }">
<el-input placeholder="节点名称" v-model="row.nodeName"></el-input>
</template>
</el-table-column>
<el-table-column label="节点操作" prop="nodeOperation">
<template slot-scope="{ row }">
<i class="el-icon-circle-plus-outline text-larger cursor-pointer" @click="plusOutline(row)"></i>
<i class="el-icon-remove-outline text-larger cursor-pointer left-margin" @click="removeOutline(row)"></i>
</template>
</el-table-column>
<el-table-column label="部门" prop="department">
<template slot-scope="{ row }">
<el-select v-model="row.department" placeholder="部门" @change="departmentChange">
<el-option v-for="item in row.departmentOptions" :key="item.value" :label="item.name" :value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="用户" prop="user">
<template slot-scope="{ row }">
<el-select v-model="row.user" placeholder="用户" @change="userChange">
<el-option v-for="item in row.userOptions" :key="item.value" :label="item.name" :value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="用户操作" prop="userOperation">
<template slot-scope="{ row }">
<i class="el-icon-circle-plus-outline text-larger cursor-pointer" @click="userPlusOutline(row)"></i>
<i class="el-icon-remove-outline text-larger cursor-pointer left-margin" @click="userRemoveOutline(row)"></i>
</template>
</el-table-column>
</el-table>
</template>
data() {
return {
verificationTableData: [
{
nodeName: '节点',
nodeOperation: '节点操作',
department: '部门',
user: '用户',
userOperation: '',
departmentOptions: [ // 签核流程配置表格部门数据
{ name: '部门1', value: 1 },
{ name: '部门2', value: 2 },
],
userOptions: [ // 签核流程配置表格用户数据
{ name: '用户1', value: 1 },
{ name: '用户2', value: 2 },
]
},
{
nodeName: '节点',
nodeOperation: '节点操作',
department: '部门',
user: '用户',
userOperation: '',
departmentOptions: [ // 签核流程配置表格部门数据
{ name: '部门1', value: 1 },
{ name: '部门2', value: 2 },
],
userOptions: [ // 签核流程配置表格用户数据
{ name: '用户1', value: 1 },
{ name: '用户2', value: 2 },
]
},
], /
mergeObj: {}, // 用来记录需要合并行的下标
mergeArr: ['nodeName'] // 表格中的列名
}
},
mounted() {
this.getSpanArr(this.verificationTableData)
},
methods: {
userPlusOutline(row) {
console.log('111');
let obj = JSON.parse(JSON.stringify(this.addDefaultObj));
obj.nodeName = '节点';
obj.departmentOptions = [
{ name: '部门3', value: 3 },
{ name: '部门4', value: 4 },
],
obj.userOptions = [
{ name: '用户3', value: 3 },
{ name: '用户4', value: 4 },
]
this.verificationTableData.push(obj);
this.getSpanArr(this.verificationTableData)
this.$refs.verificationTableData.doLayout();
},
getSpanArr(data) {
this.mergeArr.forEach((key, index) => {
let count = 0; // 用来记录需要合并行的起始位置
this.mergeObj[key] = []; // 记录每一列的合并信息
data.forEach((item, index) => {
// index == 0表示数据为第一行，直接 push 一个 1
if (index === 0) {
this.mergeObj[key].push(1);
} else {
if(item[key] === data[index - 1][key]) {
this.mergeObj[key][count] += 1;
this.mergeObj[key].push(0);
} else {
// 如果当前行和上一行其值不相等
count = index; // 记录当前位置
this.mergeObj[key].push(1); // 重新push 一个 1
}
}
})

})
console.log('this.mergeObj', this.mergeObj);

},
// 签核流程配置表格合并
spanMethod({ row, column, rowIndex, columnIndex }) {
this.$nextTick(() => {
this.$refs.verificationTableData.doLayout();
});
// 判断列的属性
if(this.mergeArr.indexOf(column.property) !== -1) {
// 判断其值是不是为0
if(this.mergeObj[column.property][rowIndex]) {
return [this.mergeObj[column.property][rowIndex], 1]
} else {
// 如果为0则为需要合并的行
return [0, 0];
}
}
},
}