Problem description

Sometimes, the tables that the product asks us to make will have the function of merging columns, but the official demo is a little unclear. This article will give an example to brief you on this. Let’s take a look at the renderings:

Suppose the product requirements are as follows: equipment category column, same category, do component heap form, that is, merge column form

Analysis of the

The analysis is written in the code comments

Code attached

<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="Serial number"
        width="58"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="toolsKinds"
        label="Equipment Category"
        align="center"
      ></el-table-column>
      <el-table-column prop="toolsName" label="Equipment Name" align="center"></el-table-column>
      <el-table-column prop="price" label="Price (yuan)" align="center"></el-table-column>
      <el-table-column prop="remark" label="Note" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Table body data
      tableBody: [{toolsKinds: "Screwdriver".toolsName: "Screwdriver Number one".price: 10.remark: ""}, {toolsKinds: "Screwdriver".toolsName: "Screwdriver Number two".price: 20.remark: ""}, {toolsKinds: "Screwdriver".toolsName: "Screwdriver Number three.".price: 30.remark: ""}, {toolsKinds: "Key".toolsName: "Big wrench.".price: 88.remark: ""}, {toolsKinds: "Key".toolsName: "Medium wrench".price: 44.remark: ""}, {toolsKinds: "Tiger pincers".toolsName: "Mars for vice.".price: 999.remark: ""}, {toolsKinds: "Tiger pincers".toolsName: "Saturn for vice.".price: 1001.remark: ""],},cellList: [].// Array of cells
      count: null./ / count
    };
  },
  mounted() {
    // Step 1, calculate the merged cell information according to the table body information
    this.computeCell(this.tableBody);
  },
  methods: {
    computeCell(tableBody) {
      // Loop over the table body data
      for (let i = 0; i < tableBody.length; i++) {
        if (i == 0) {
          // Set the first item first
          this.cellList.push(1); If the next item is the same, append 0 to the cellList array
          this.count = 0; // The initial count is 0
          console.log("Index".0.this.count);
        } else {
          // Determine whether the current item is the same as the device category of the previous item, because it is the cell of the merged column
          if (tableBody[i].toolsKinds == tableBody[i - 1].toolsKinds) {
            // If it is equal
            this.cellList[this.count] += 1; // Add count
            this.cellList.push(0); // Append 0 to cellList array
            console.log("Index", i, this.count);
          } else {
            this.cellList.push(1); // Append 1 to the cellList array
            this.count = i; // Assign the index to count
            console.log("Index", i, this.count); }}}},// Step 2, return the calculated result to el-Table, so that the table will render the corresponding merged column based on the result
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // Merge the second column. 0 is the first column, 1 is the second column.
      if (columnIndex === 1) {
        console.log("Array of cells, if the next item is 0, merge the previous item.".this.cellList);
        const rowCell = this.cellList[rowIndex];
        if (rowCell > 0) {
          const colCell = 1;
          console.log('Dynamic vertical merge cells, no${colCell}Columns, vertical merge${rowCell}Four cells);
          return {
            rowspan: rowCell,
            colspan: colCell,
          };
        } else {
          // Clear the original cell, must be added, otherwise there will be a cell will be squeezed sideways behind!!
          // In this case, the data is written dead and will not appear, if the data is dynamically fetched, it will appear!!
          return {
            rowspan: 0.colspan: 0}; }}},},};</script>
Copy the code

Print a screenshot

Pay attention to the print

To demonstrate, just copy and paste