基于element table合并示例代码

项目需求：将相同得数据合并，相同得数据有且唯一标识符

以下是示例代码：

HTML部分：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :span-method="arraySpanMethod">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="userCode" label="用户编码" width="180"/>
      <el-table-column prop="userName" label="用户名称" width="180"/>
      <el-table-column prop="deptName" label="部门" width="180"/>
      <el-table-column prop="postName" label="岗位" width="180"/>
    </el-table>
  </div>
</template>

JS部分：

<script setup>
import {onMounted, ref} from "vue";

const tableData = ref([
      {
        userId: '1001',
        userCode: 'zhangsan',
        userName: '张三',
        deptName: '销售部',
        postName: '销售员'
      },
      {
        userId: '1001',
        userCode: 'zhangsan',
        userName: '张三',
        deptName: '后勤部',
        postName: '销售员'
      }, {
        userId: '1001',
        userCode: 'zhangsan',
        userName: '张三',
        deptName: '学杂部',
        postName: '李四员'
      }, {
        userId: '1002',
        userCode: 'lisi',
        userName: '李四',
        deptName: '李四部',
        postName: '李四员'
      }, {
        userId: '1002',
        userCode: 'lisi',
        userName: '李四',
        deptName: '销售部',
        postName: '销售员'
      }, {
        userId: '1003',
        userCode: 'wangwu',
        userName: '王五',
        deptName: '王五部',
        postName: '销售员'
      }, {
        userId: '1003',
        userCode: 'wangwu',
        userName: '王五',
        deptName: '王五部',
        postName: '销售员'
      },
    ])
;
const testArr1 = ref([]);
const testPosition1 = ref(0)
const testArr2 = ref([]);
// const testArr3 = ref([]);
onMounted(() => {
  add()
})

function add() {
  testArr1.value = []
  rowspan(testArr1.value, testPosition1.value, "userId");
  rowspan1(testArr2.value, testPosition1.value, "userId", "postName");
  console.log(testArr1.value, "testArr1.value")
  console.log(testArr2.value, "testArr2.value")
}

//获取合并列数组
function rowspan(spanArr, position, spanName) {
  tableData.value.forEach((item, index) => {
    if (index === 0) {
      spanArr.push(1);
      position = 0;
    } else {
      if (tableData.value[index][spanName] === tableData.value[index - 1][spanName]) {
        spanArr[position] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        position = index;
      }
    }
  })
}

function rowspan1(spanArr, position, spanName, spanName1) {
  tableData.value.forEach((item, index) => {
    if (index === 0) {
      spanArr.push(1);
      position = 0;
    } else {
      if (tableData.value[index][spanName] === tableData.value[index - 1][spanName]
          &&
          tableData.value[index][spanName1] === tableData.value[index - 1][spanName1]) {
        spanArr[position] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        position = index;
      }
    }
  })
}


// eslint-disable-next-line no-unused-vars
function arraySpanMethod({row, column, rowIndex, columnIndex}) {
  if (columnIndex !== 3 && columnIndex !== 4) {
    let _row = testArr1.value[rowIndex]
    let _col = _row > 0 ? 1 : 0
    return {rowspan: _row, colspan: _col}
  } else if (columnIndex === 4) {
    let _row = testArr2.value[rowIndex]
    let _col = _row > 0 ? 1 : 0
    return {rowspan: _row, colspan: _col}
  }
}
</script>

代码解释说明：

关键点在于 rowspan 和 rowspan1 这两个函数身上一个筛选出来userId相同得数据一个筛选出来同时满足userId和postName得数据，如果其他业务也有需求请自行加判断满足得条件。