需求：动态添加table数据并合并行
问题：动态添加数据的时候其他属性都可以显示出来，唯独合并那行显示不出来，请教什么问题；
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];
}
}
},
}
该回答引用ChatGPT-3.5，仅供参考，不保证完全正确
根据你提供的代码，我看到你在Vue.js中使用了JavaScript来动态添加数据到表格，并尝试合并行。根据你的问题描述，你说动态添加数据时其他属性都可以显示出来，唯独合并那行显示不出来。
在你的代码中，我没有看到你在模板中使用表格组件，可能是因为你没有提供完整的代码。但是我可以给你一些建议，希望能帮助你解决问题。
首先，你需要确保你的表格组件正确引入并使用了合适的数据。在你的mounted钩子函数中调用getSpanArr方法来初始化合并信息是正确的。
然后，你的getSpanArr方法看起来是用来计算每列的合并信息的。在这个方法中，你使用了this.mergeArr来迭代每列，并根据列的值是否相等来确定合并行的起始位置。你在迭代过程中使用了count变量来记录起始位置，并在合并行的情况下将该列的对应位置设置为0。这部分的逻辑看起来是正确的。
然后，在你的spanMethod方法中，你使用了this.mergeObj和this.mergeArr来确定是否应该合并行。根据你的描述，其他属性都可以正确显示，只有合并行无法显示。根据你提供的代码，我暂时没有看到明显的问题。
但是，根据你的描述，可能的原因之一是在你的模板中没有正确使用spanMethod方法来应用合并行。你需要在表格组件的相应位置调用spanMethod方法，并根据方法的返回值来确定是否应该进行合并行。你可能需要在表格的<el-table-column>标签中添加:span-method属性，并将其绑定到spanMethod方法。
举个例子，假设你的表格组件如下所示：
<el-table :data="verificationTableData" ref="verificationTableData">
<el-table-column prop="nodeName" label="节点" :span-method="spanMethod"></el-table-column>
<el-table-column prop="nodeOperation" label="节点操作"></el-table-column>
<el-table-column prop="department" label="部门"></el-table-column>
<el-table-column prop="user" label="用户"></el-table-column>
<!-- 其他列 -->
</el-table>
请确保你在需要合并行的列上正确绑定了span-method属性，并将其绑定到spanMethod方法。
如果你已经正确使用了spanMethod方法，但合并行仍然无法显示，请提供更完整的代码以便我更好地帮助你解决问题。
获取并遍历数据
.done(function (data) {
dom = '';
data.list.forEach(function (pre) {
//拼接列表
dom += '<tr>';
dom += '<td>'+ pre.presetPointIndex +'</td>';
dom += '<td>'+ pre.presetPointName +'</td>';
dom += '<td style="width:45px"><button type="button" class="btn btn-default btn-xs select" id='+pre.cameraIndexCode+' name='+pre.presetPointIndex+'>选择</button></td>';
dom += '</tr>';
})
$("#presetBody").html(dom);