关于element-ui:eltable合并列代码步骤讲解

问题形容

有时候，产品让咱们做的表格，会有合并列的性能，然而官网的 demo 略有不清晰，本文举个例子简述之。咱们先看下效果图：

假如产品的需要是这样的： 设施类别那一列，同类的，做成分堆模式，也就是合并列模式

剖析

剖析写在代码正文中外面哦

代码附上

<template>
  <div class="vueWrap">
    <el-table
      :span-method="objectSpanMethod"
      style="width: 800px"
      :data="tableBody"
      border
      :header-cell-style="{
        background: '#FAFAFA',
        color: '#333333',
        fontWeight: 'bold',
        fontSize: '14px',
      }"
    >
      <el-table-column
        type="index"
        label="序号"
        width="58"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="toolsKinds"
        label="设施类别"
        align="center"
      ></el-table-column>
      <el-table-column prop="toolsName" label="设施名称" align="center"></el-table-column>
      <el-table-column prop="price" label="价格（元）" align="center"></el-table-column>
      <el-table-column prop="remark" label="备注" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {data() {
    return {
      // 表体数据
      tableBody: [
        {
          toolsKinds: "螺丝刀",
          toolsName: "一号螺丝刀",
          price: 10,
          remark: "",
        },
        {
          toolsKinds: "螺丝刀",
          toolsName: "二号螺丝刀",
          price: 20,
          remark: "",
        },
        {
          toolsKinds: "螺丝刀",
          toolsName: "三号螺丝刀",
          price: 30,
          remark: "",
        },
        {
          toolsKinds: "扳手",
          toolsName: "大号扳手",
          price: 88,
          remark: "",
        },
        {
          toolsKinds: "扳手",
          toolsName: "中号扳手",
          price: 44,
          remark: "",
        },
        {
          toolsKinds: "老虎钳子",
          toolsName: "火星专供老虎钳",
          price: 999,
          remark: "",
        },
        {
          toolsKinds: "老虎钳子",
          toolsName: "土星专供老虎钳",
          price: 1001,
          remark: "",
        },
      ],
      cellList: [], // 单元格数组
      count: null, // 计数
    };
  },
  mounted() {
    // 第 1 步，依据表体信息，计算合并单元格的信息
    this.computeCell(this.tableBody);
  },
  methods: {computeCell(tableBody) {
      // 循环遍历表体数据
      for (let i = 0; i < tableBody.length; i++) {if (i == 0) {
          // 先设置第一项
          this.cellList.push(1); // 初为 1，若下一项和此项雷同，就往 cellList 数组中追加 0
          this.count = 0; // 初始计数为 0
          console.log("索引", 0, this.count);
        } else {
          // 判断以后项与上项的设施类别是否雷同，因为是合并这一列的单元格
          if (tableBody[i].toolsKinds == tableBody[i - 1].toolsKinds) {
            // 如果相等
            this.cellList[this.count] += 1; // 减少计数
            this.cellList.push(0); // 相等就往 cellList 数组中追加 0
            console.log("索引", i, this.count);
          } else {this.cellList.push(1); // 不等就往 cellList 数组中追加 1
            this.count = i; // 将索引赋值为计数
            console.log("索引", i, this.count);
          }
        }
      }
    },
    // 第 2 步，将计算好的后果返回给 el-table，这样的话表格就会依据这个后果做对应合并列渲染
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      // 给第二列做单元格合并。0 是第一列，1 是第二列。if (columnIndex === 1) {console.log("单元格数组，若下一项为 0，则代表合并上一项", this.cellList);
        const rowCell = this.cellList[rowIndex];
        if (rowCell > 0) {
          const colCell = 1;
          console.log(` 动静竖向合并单元格, 第 ${colCell} 列，竖向合并 ${rowCell} 个单元格 `);
          return {
            rowspan: rowCell,
            colspan: colCell,
          };
        } else {
          // 革除原有的单元格，必须要加，否则就会呈现单元格会被横着挤到前面了！！！// 本例中数据是写死的不会呈现，数据若是动静后端获取的，就会呈现了！！！return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

打印截图

留神打印的后果

演示的话，间接复制粘贴即可