使用element-ui 表格有一些特殊的表格

还有一种就是内容部分有合并：

这种情况按照element表格得数据我们需要和后台来配合对数据来进行一个处理

这里我就只放一些可能会用到得代码，其他的就不放了，防止受到干扰

 <el-table
          :data="baseDataList"  
          ref="myTable" 
          :span-method="objectSpanMethod"
          :key="resetTableHeader" 
        ></el-table>

key： 是我们在处理表头的时候需要用到，如果表头是根据后台得数据来动态生成的，那我们在生成之后防止表格样式出现错乱或者不是我们静态放置得样子的时候就需要放key,具体用法就是data当中定义一个变量(resetTableHeader) ,当我们动态生成了表头的时候 this.resetTableHeader = !this.resetTableHeader让表格重新渲染一次就可以了

或者是

 this.$nextTick(() => {
             // 初始化表格
             this.$refs.myTable.doLayout();
         });

这是我后台返回的数据，不知道几行为一列，所以有多少条数据其实应该有一个总的名称的时候进行合并，这里采用districtId 辖区来进行判断，是不是属于用一个辖区的，  bayonetId 卡口也可能是某个卡口有多条数据

{
         "success": true,
         "results": [
           {
             "flow": 19028,
             "dimensionMap": {
               "VehicleType": [//车型
                 {
                   "dimensionValue": "K39",
                   "statValue": 342
                 },
                 {
                   "dimensionValue": "M2",
                   "statValue": 144
                 }
               ]
             },
             "districtId": "430202",//辖区
             "bayonetId": "430202600011001",//卡口
             "transectId":"4302026000110011",//断面
             "laneNo":1,
             "statTimeStr": "2023-01-05"
           },
           {
             "flow": 19028,
             "dimensionMap": {
               "VehicleType": [
                 {
                   "dimensionValue": "K39",
                   "statValue": 342
                 },
                 {
                   "dimensionValue": "M2",
                   "statValue": 144
                 }
               ]
             },
             "districtId": "430202",
             "bayonetId": "430202600021002",
             "transectId":"4302026000210021",
             "laneNo":1,
             "statTimeStr": "2023-01-05"
           },
           {
             "flow": 19028,
             "dimensionMap": {
               "VehicleType": [
                 {
                   "dimensionValue": "K39",
                   "statValue": 342
                 },
                 {
                   "dimensionValue": "M2",
                   "statValue": 144
                 }
               ]
             },
             "districtId": "430202",
             "bayonetId": "430202600021002",
             "transectId":"4302026000210022",
             "laneNo":1,
             "statTimeStr": "2023-01-06"
           },
           {
             "flow": 19028,
             "dimensionMap": {
               "VehicleType": [
                 {
                   "dimensionValue": "K39",
                   "statValue": 342
                 },
                 {
                   "dimensionValue": "M2",
                   "statValue": 144
                 }
               ]
             },
             "districtId": "430203",
             "bayonetId": "430203610041103",
             "transectId":"4302036100411032",
             "laneNo":1,
             "statTimeStr": "2023-01-06"
           },
           {
             "flow": 19028,
             "dimensionMap": {
               "VehicleType": [
                 {
                   "dimensionValue": "K39",
                   "statValue": 342
                 },
                 {
                   "dimensionValue": "M2",
                   "statValue": 144
                 }
               ]
             },
             "districtId": "430203",
             "bayonetId": "430203610041103",
             "transectId":"4302036100411032",
             "laneNo":1,
             "statTimeStr": "2023-01-06"
           },
           {
             "flow": 19028,
             "dimensionMap": {
               "VehicleType": [
                 {
                   "dimensionValue": "K39",
                   "statValue": 342
                 },
                 {
                   "dimensionValue": "M2",
                   "statValue": 144
                 }
               ]
             },
             "districtId": "430203",
             "bayonetId": "430203710331105",
             "transectId":"4302037103311051",
             "laneNo":1,
             "statTimeStr": "2023-01-06"
           },


         ],
         "msg": "成功",
         "msgCode": 0
       };

合并行的方法，获取到的数据调用这个方法，来判断哪些要合并，合并几行或者几列，在数据中添加属性来标识

  tableHeaderFn(table) {
      // districtId: 辖区id
      // bayonetId： 卡口id
      table.forEach((item, index) => {
        // 添加合并行标识
        table[0].isFirst = true;
        table[0].isTwo = true;
        // 当前对比的合并行
        let mergeRow = table[0];
        let mergeRowKK = table[0];
        // 当前对比值
        let curKey = mergeRow.districtId;
        let curId = mergeRow.bayonetId;
        // 当前行的index
        let nowIndex = 1;
        let nowKKIndex = 1;
        // 相同个数
        let sameNum = 1;
        let kkNum = 1;
        // 循环添加合并标识;
        // ++++++++++++++ BEGIN  合并辖区 +++++++++++++++++++++
        while (nowIndex < table.length) {
          table[nowIndex].isFirst = false;
          table[nowIndex].sameNum = 1;
          mergeRow.sameNum = sameNum;

          if (table[nowIndex].districtId == curKey) {
            // 如果当前值与需要对比的值相等 sameNum+1
            sameNum += 1;
            // 如果数组最后一个的值跟前一个的值相等
            if (nowIndex == table.length - 1) {
              mergeRow.sameNum = sameNum;
            }
          } else {
            // 如果不相等 设置当前对象为新的开始合并对象
            mergeRow.sameNum = sameNum;
            mergeRow = table[nowIndex];
            mergeRow.isFirst = true;
            curKey = mergeRow.districtId;
            sameNum = 1;
          }
          nowIndex++;
        }
        // ++++++++++++++ END  合并辖区 +++++++++++++++++++++

        // ++++++++++++++ BEGIN  卡口 +++++++++++++++++++++
        while (nowKKIndex < table.length) {
          table[nowKKIndex].isTwo = false;
          table[nowKKIndex].kkNum = 1;
          mergeRowKK.kkNum = kkNum;
          if (table[nowKKIndex].bayonetId == curId) {
            // 如果当前值与需要对比的值相等 curId+1
            kkNum += 1;
            // 如果数组最后一个的值跟前一个的值相等
            if (nowKKIndex == table.length - 1) {
              mergeRowKK.kkNum = kkNum;
            }
          } else {
            mergeRowKK.kkNum = kkNum;
            mergeRowKK = table[nowKKIndex];
            mergeRowKK.isTwo = true;
            curId = mergeRowKK.bayonetId;
            kkNum = 1;
          }
          nowKKIndex++;
        }
        // ++++++++++++++ END  卡口 +++++++++++++++++++++
      });
      return table;
    },

element表格合并的方法 span-method: 合并行或者例（这里的案例是合并行）

  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (row.isFirst) {
          return {
            rowspan: row.sameNum,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }

      if (columnIndex === 2) {
        if (row.isTwo) {
          return {
            rowspan: row.kkNum,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },