ElementUI中el-table合并单元格

前言

在Vue3项目中有个页面需要用表格展示，遇到单元格合并的问题，如果不合并就是这样式儿~的

如图：

但是，客户想要的明显不是这样的效果，提出了把单元格合并的想法，就像 Excel 合并单元格那样

面对用户的要求，只能说尽力实现（其实可以实现，上次在Vue2的项目中搞过）

于是我找到了之前的项目，使用 CV 大法快速搞定，特来记录一下

下面开始正文~

ElementUI Table 组件有提供合并的方法：

那么直接把代码拷贝过来就可以了

第一步：el-table 组件添加合并方法

<el-table :data="tableData" style="width: 100%" :span-method="spanMethod">
 </el-table>

第二步：添加 js 代码

const state = reactive({
  mergeObj: {}, // 用来记录需要合并行的下标
  mergeArr: ["bigType", "middleType", "smallType"], // 表格中的列名
});

// 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 判断列的属性
  if (state.mergeArr.indexOf(column.property) !== -1) {
    // 判断其值是不是为0
    if (state.mergeObj[column.property][rowIndex]) {
      return [state.mergeObj[column.property][rowIndex], 1]
    } else {
      // 如果为0则为需要合并的行
      return [0, 0]
    }
  }
}

// getSpanArr方法
const getSpanArr = (data) => {
  state.mergeArr.forEach((key, index1) => {
    let count = 0 // 用来记录需要合并行的起始位置
    state.mergeObj[key] = [] // 记录每一列的合并信息
    data.forEach((item, index) => {
      // index == 0表示数据为第一行，直接 push 一个 1
      if (index === 0) {
        state.mergeObj[key].push(1)
      } else {
        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
        if (item[key] === data[index - 1][key]) {
          state.mergeObj[key][count] += 1
          state.mergeObj[key].push(0)
        } else {
          // 如果当前行和上一行其值不相等
          count = index // 记录当前位置
          state.mergeObj[key].push(1) // 重新push 一个 1
        }
      }
    })
  })
}

最后，要在获取表格数据后调用 getSpanArr

const GetTableDataMock = (data) => {
  state.loading = true
  state.tableData = []
  state.total = 0
  getTableDataMock(data)
    .then((res) => {
      state.tableData = res.result.data
      state.total = res.result.total
      getSpanArr(state.tableData)
    })
    .finally(() => {
      state.loading = false
    })
}

接下来就是见证奇迹的时刻，结果如图：

可以看到最左侧的单元格已经合并了

over~

贴一下之前参考的链接：www.cnblogs.com/hjbky/p/177…