el-table实现合并单元格

说明

在表格数据中针对某一列的数据如果上下单元格的值一样则合并展示

实现要点

• 通过el-table的:span-method=""定义单元格合并方式

html

<el-table :data="tableData" :span-method="objectSpanMethod" border>
　　<el-table-column prop="name" label="学生姓名" />
　　<el-table-column prop="tel" label="手机号" width="200" />
　　<el-table-column prop="teacher" label="老师姓名" align="center" />
　　<el-table-column prop="lesson" label="科目" width="200" align="center"/>
</el-table>

原始数据格式

const list = [
  {
    name: '星星',
    tel: '1877777777',
    list: [
      {
        lesson: '语文',
        teacher: '孙老师',
      },
      {
        lesson: '数学',
        teacher: '周老师',
      },
      {
        lesson: '英语',
        teacher: '王老师',
      },
    ],
  },
  {
    name: '垚垚',
    tel: '1866666666',
    list: [
      {
        lesson: '美术',
        teacher: '陈老师',
      },
      {
        lesson: '播音',
        teacher: '王老师',
      },
    ],
  },
];

转换方法

// 转换数据-合并行
const resetArr = (arr) => {
  let result = [];
  arr.forEach((item) => {
    if (item.list) {
      item.list.forEach((sub, index) => {
        result.push({
          ...sub,
          name: item.name,
          rowlen: item.list.length,
          rowind: index,
          tel: item.tel,
        });
      });
    }
  });
  return result;
};
const tableData = ref([]);
const getList = async (val) => {
  tableData.value = resetArr(list);
};
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0 || columnIndex === 1) {
    if (row.rowind == 0) {
      return { rowspan: row.rowlen, colspan: 1 };
    } else {
      return { rowspan: 0, colspan: 0 };
    }
  }
};
onMounted(() => {
  getList();
});

效果展示