Element+vue3.0 tabel合并单元格span-method

Element+vue3.0 tabel合并单元格 span-method

:span-method="objectSpanMethod"详解：

在 objectSpanMethod 方法中，rowspan 和 colspan 的值通常用来定义单元格的行跨度和列跨度。

一般来说，rowspan 和 colspan 的值应该是大于等于1的整数，表示单元格的跨度。如果设置为0，则表示该单元格不跨行或列。然而，通常在 Vue 的 Element UI 表格中，rowspan 和 colspan 的值不应该为0，因为这可能会导致布局问题或显示异常。如果你尝试将 rowspan 或 colspan 设置为0，不生成单元格。

rowspan: 定义单元格应横跨多少行。
colspan: 定义单元格应横跨多少列。
row: 当前行的数据对象。
column: 当前列的配置对象。
rowIndex: 当前行的索引（从0开始）。
columnIndex: 当前列的索引（从0开始）。

HTML

<el-table :data="tableData" :span-method="objectSpanMethod">
    <el-table-column prop="name" label="名称" width="180"></el-table-column>
    <el-table-column prop="part" label="部件" width="180"></el-table-column>
    <el-table-column prop="result" label="结果" width="180"></el-table-column>
    <el-table-column prop="img" label="图片" width="180"></el-table-column>
    <el-table-column prop="remark" label="备注" width="180"></el-table-column>
    <!-- 其他列定义 -->
  </el-table>

数据：

tableData: [
        {
          name: "整车外观",
          part: "车架编号照片1",
          result: true,
          img: "img",
          remark: "remark",
        },
        {
          name: "整车外观",
          part: "车架编号照片2",
          result: true,
          img: "img",
          remark: "remark",
        },
        {
          name: "整车外观",
          part: "车架编号照片3",
          result: true,
          img: "img",
          remark: "remark",
        },
        {
          name: "动力传动",
          part: "车架编号照片1",
          result: true,
          img: "img",
          remark: "remark",
        },
        {
          name: "动力传动",
          part: "车架编号照片2",
          result: true,
          img: "img",
          remark: "remark",
        },
        {
          name: "动力传动",
          part: "车架编号照片3",
          result: true,
          img: "img",
          remark: "remark",
        },
        {
          name: "车轮和转向检查",
          part: "车架编号照片1",
          result: true,
          img: "img",
          remark: "remark",
        },
        {
          name: "车轮和转向检查",
          part: "车架编号照片2",
          result: true,
          img: "img",
          remark: "remark",
        },
        {
          name: "车轮和转向检查",
          part: "车架编号照片3",
          result: true,
          img: "img",
          remark: "remark",
        },
      ],

方法：

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
  if (columnIndex === 0 || columnIndex === 2) {
    // 当前列为0的时候不进行操作单元格
    const name = row[column.property];
    const preRow = tableData.value[rowIndex - 1];
    const preValue = preRow ? preRow[column.property] : null;
    // 当前行的数据对象的name 是否和 上一行列的 name 是否相等 相等就不合并单元格
    if (name === preValue) {
      return { rowspan: 0, colspan: 0 }; // 不生成单元格
    } else {
      let rowspan = 1;
      for (let i = rowIndex + 1; i < tableData.value.length; i++) {
        const nextRow = tableData.value[i];
        const nextValue = nextRow[column.property];
        if (nextValue === name) {
          rowspan++;
        } else {
          break;
        }
      }
      return { rowspan, colspan: 1 };
    }
  }
};