Element UI 表格合并单元格导致删除按钮不显示的解决方法

在使用 Element UI 开发表格时，我们可能会遇到合并单元格后，操作列中的删除按钮不显示的情况。本文将分析这种情况出现的原因，并提供解决方法。

问题描述

假设我们使用了 arraySpanMethod() 方法来合并单元格，并在操作列中添加了一个删除按钮：

// 合并单元格
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  if (row.summaryName === null) {
    if (columnIndex === 0) {
      return [1, 4];
    }
  }
},

<el-table-column label='操作' align='center' width='100'>
  <template slot-scope='scope'>
    <template v-if='scope.row.summaryName === null'>
      <el-button
        size='mini'
        type='text'
        width='170px'
        @click='handleDelete(scope.row)'
      >
        删除
      </el-button>
    </template>
  </template>
</el-table-column>

如果 row.summaryName 不为 null，那么删除按钮将不会显示。

问题原因

根据代码片段，arraySpanMethod() 方法用于合并单元格，根据条件决定是否合并单元格。根据代码，当 row.summaryName 为 null 且 columnIndex 为 0 时，返回 [1, 4]，表示合并当前单元格与后面的 4 个单元格。

然后，在 <el-table-column> 中，使用了一个模板来显示操作列。在模板中，使用了 v-if 条件判断，只有当 scope.row.summaryName 为 null 时，才会显示删除按钮。所以，当 row.summaryName 不为 null 时，删除按钮就不会显示。

解决方法

为了使删除按钮在所有情况下都显示，可以将 <template v-if='scope.row.summaryName === null'> 修改为 <template>。这样，无论 row.summaryName 的值是什么，删除按钮都会显示出来。

<el-table-column label='操作' align='center' width='100'>
  <template slot-scope='scope'>
    <template>
      <el-button
        size='mini'
        type='text'
        width='170px'
        @click='handleDelete(scope.row)'
      >
        删除
      </el-button>
    </template>
  </template>
</el-table-column>

总结

本文分析了 Element UI 表格中合并单元格导致删除按钮不显示的原因，并提供了解决方法。在开发中，要注意合并单元格逻辑与其他元素显示条件的冲突，避免出现类似问题。