动态添加数据的时候其他属性都可以显示出来，唯独合并那行显示不出来

Question

需求：动态添加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]; 
      }
    }
  },
}

Answer 1

该回答引用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方法，但合并行仍然无法显示，请提供更完整的代码以便我更好地帮助你解决问题。