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

• Z时代
• 2024-03-15
• 分类：IT

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

回答：

getSpanArr(data) {
  this.mergeObj = {};  // 重置mergeObj
  this.mergeArr.forEach((key, index) => {
    // 
  })
}

以上是 el-table动态添加数据的时候其他属性都可以显示出来，唯独合并那行显示不出来? 的全部内容， 来源链接： utcz.com/p/934378.html