element UI table合并行合并列(整理)

图一
<template>
  <div class="container">
    <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 type="index" label="序号" width="100"></el-table-column>
      <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>
  </div>
</template>
<script>
  export default {
    name: "tableCom",
    data() {
      return {
        //注释：示例是用参数-product_name进行处理-该例好像只有数据是连续aaaa  或  bbbb才可以（第一条是a第二条是a第三条是b---不能第二条是b，第三条是a）
        dataSource: [{
            product_name: "aaaa",
            cap_name: "aa1",
            "name": 1,
            "name1": 1,
            "name2": 0
          },
          {
            product_name: "aaaa",
            cap_name: "aa2",
            "name": 0,
            "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: {
      arraySpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        // 合并行  产品名字相同合并
        if (columnIndex === 1) {
          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];
            }
          }
        }
      }
    },
    created() {
    }
  };
</script>
图二、
<template>
  <div class="container">
    <el-table :data="tableData" border :span-method="objectSpanMethod">
      <el-table-column prop="name" label="测试1" align="center" />
      <el-table-column prop="name1" label="测试2" align="center" />
      <el-table-column prop="name2" label="测试3" align="center" />
    </el-table>
  </div>
</template>
<script>
  export default {
    name: "tableCom",
    data() {
      return {
        tableData: [{
            name: "测试1",
            name1: "111",
            name2: "1",
          },
          {
            name: "测试1",
            name1: "11111",
            name2: "1",
          },
          {
            name: "测试1",
            name1: "11111",
            name2: "1",
          },
          {
            name: "测试1",
            name1: "111111",
            name2: "1",
          },
          {
            name: "测试2",
            name1: "222",
            name2: "２",
          },
          {
            name: "测试2",
            name1: "2222",
            name2: "２",
          },
          {
            name: "测试3",
            name1: "333333",
            name2: "3",
          },
        ],
        rowIndex: "-1",
        OrderIndexArr: [],
        provinceArr: []
      };
    },
    methods: {
      merge() {
        let OrderObj = {};
        let provinceObj = {};
        this.tableData.forEach((element, index) => {
          element.rowIndex = index;
          if (OrderObj[element.name]) {
            let nextItem = this.tableData[index + 1] ?
              this.tableData[index + 1].name :
              undefined;
            let prevItem = this.tableData[index - 1].name ?
              this.tableData[index - 1].name :
              undefined;
            if (element.name == nextItem) {
              OrderObj[element.name].push(index);
            } else if (element.name == prevItem) {
              OrderObj[element.name].push(index);
            }
          } else {
            OrderObj[element.name] = [];
            OrderObj[element.name].push(index);
          }
          if (provinceObj[element.name1]) {
            let nextPro = this.tableData[index + 1] ?
              this.tableData[index + 1].name1 :
              undefined;
            let prevPro = this.tableData[index - 1].name1 ?
              this.tableData[index - 1].name1 :
              undefined;
            if (element.name1 == nextPro) {
              provinceObj[element.name1].push(index);
            } else if (element.name1 == prevPro) {
              provinceObj[element.name1].push(index);
            }
          } else {
            provinceObj[element.name1] = [];
            provinceObj[element.name1].push(index);
          }
        });
        // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
        for (let k in OrderObj) {
          if (OrderObj[k].length > 1) {
            this.OrderIndexArr.push(OrderObj[k]);
          }
        }
        for (let i in provinceObj) {
          if (provinceObj[i].length > 1) {
            this.handleData(provinceObj[i])
          }
        }
      },
      handleData(data) {
        console.log(data, 'data');
        let temp = data;
        let itemArr = [];
        let itemArrNew = [];
        let resArr = [];
        if (data.length > 2) {
          for (let i = 0; i < data.length; i++) {
            if (data[i + 1]) {
              if (data[i + 1] - data[i] > 1) {
                itemArr = data.slice(0, i + 1)
                itemArrNew = temp.slice(i + 1, temp.length)
                break;
              } else {
                resArr = data
              }
            }
          }
          if (itemArr.length > 0 || itemArrNew.length > 0) {
            this.provinceArr.push(itemArr)
            this.provinceArr.push(itemArrNew)
          } else {
            this.provinceArr.push(data)
          }
        } else {
          this.provinceArr.push(data)
        }
      },
      objectSpanMethod({
        row,
        rowIndex,
        column,
        columnIndex
      }) {
        if (columnIndex === 0) {
          for (let i = 0; i < this.OrderIndexArr.length; i++) {
            let element = this.OrderIndexArr[i];
            for (let j = 0; j < element.length; j++) {
              let item = element[j];
              if (rowIndex === item) {
                if (j === 0) {
                  return {
                    rowspan: element.length,
                    colspan: 1
                  };
                } else if (j !== 0) {
                  return {
                    rowspan: 0,
                    colspan: 0
                  };
                }
              }
            }
          }
        }
        if (columnIndex === 1) {
          for (let j = 0; j < this.provinceArr.length; j++) {
            let element = this.provinceArr[j];
            for (let k = 0; k < element.length; k++) {
              let item = element[k];
              if (rowIndex === item) {
                if (k === 0) {
                  return {
                    rowspan: element.length,
                    colspan: 1
                  };
                } else if (k !== 0) {
                  return {
                    rowspan: 0,
                    colspan: 0
                  };
                }
              }
            }
          }
        }
      },
    },
    created() {
      this.$nextTick(() => {
        this.merge()
      })
    }
  };
</script>