el根据需求合并列

将列分为 3 3 1 的格式

以下是vue代码：

bash 复制代码

<el-table
          :data="dataSource"
          :border="true"
          :header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          size="mini"
          style="width: 100%"
          :span-method="arraySpanMethod"
        >
          <el-table-column prop="product_name" label="名称1"></el-table-column>
          <el-table-column prop="cap_name" label="名称2"></el-table-column>
          <el-table-column prop="name" label="名称3"></el-table-column>
          <el-table-column prop="name1" label="名称4"></el-table-column>
          <el-table-column prop="name2" label="名称5"></el-table-column>
        </el-table>

data:

bash 复制代码

//注释：示例是用参数-product_name进行处理-该例好像只有数据是连续aaaa  或  bbbb才可以（第一条是a第二条是a第三条是b---不能第二条是b，第三条是a）
      dataSource: [
        {
          product_name: "aaaa",
          cap_name: "aa1",
          name: 2,
          name1: 1,
          name2: 0,
        },
        {
          product_name: "aaaa",
          cap_name: "aa2",
          name: 1,
          name1: 1,
          name2: 1,
        },
        ,
        {
          product_name: "aaaa",
          cap_name: "aa3",
          name: 1,
          name1: 1,
          name2: 1,
        },
        {
          product_name: "bbbb",
          cap_name: "bb1",
          name: 1,
          name1: 1,
          name2: 0,
        },
        {
          product_name: "bbbb",
          cap_name: "bb2",
          name: 0,
          name1: 1,
          name2: 1,
        },
        {
          product_name: "bbbb",
          cap_name: "bb3",
          name: 0,
          name1: 1,
          name2: 1,
        },
        {
          product_name: "ccccc",
          cap_name: "cc2",
          name: 0,
          name1: 1,
          name2: 1,
        },
        {
          product_name: "ddddd",
          cap_name: "dd3",
          name: 0,
          name1: 1,
          name2: 1,
        },
      ],

methods:

bash 复制代码

arraySpanMethod({ row, rowIndex, columnIndex }) {
      // // 合并行  产品名字相同合并
      if (columnIndex === 0) {
        if (
          rowIndex === 0 ||
          row.product_name != this.dataSource[rowIndex - 1].product_name
        ) {
          let rowspan = 0;
          this.dataSource.forEach((element) => {
            if (element.product_name === row.product_name) {
              rowspan++;
            }
          });
          return [rowspan, 1];
        } else {
          return [0, 0];
        }
      }

     // 合并列 名称值都为1 的合并
      if (columnIndex > 2) {
        let colspan = 0;
        let colkeys = Object.keys(row);
        let currentindex = columnIndex - 1;
        if (row[colkeys[currentindex]] === 1) {
          if (row[colkeys[currentindex - 1]] != row[colkeys[currentindex]]) {
            for (let i = currentindex; i < colkeys.length; i++) {
              if (row[colkeys[i]] === 1) {
                colspan++;
              } else {
                break;
              }
            }
            return [1, colspan];
          } else {
            return [0, 0];
          }
        }
      }
    },

列合并只需把行合并注释掉即可，如果想第二列合并那就把columnIndex === 0换成1 即可。