elementui合并列和排序冲突 element列表动态列合并

公司使用若依框架，需要对表格进行动态合并，需要使用vue el-table表格进行统计展示，
	1.第一步效果图（不满意）；

上代码：

<el-table v-loading="loading" 
      :data="khxzList" 
      @selection-change="handleSelectionChange"
      :span-method="objectSpanMethod"
      border>
      <el-table-column label="考核标准" align="center" prop="khbzName" />
      <el-table-column label="考核部门" align="center" prop="khbm" />
      <el-table-column label="考核事项" align="center" prop="khsx" />
      <el-table-column label="分解分值" align="center" prop="score" />
      <el-table-column label="考核内容" align="center" prop="khnr" />
      <el-table-column label="考核方式" align="center" prop="khfs" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['hzkh:khxz:edit']"
          ></el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['hzkh:khxz:remove']"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

data() {
    return {
      //考核标准下拉框
      khbzList:[
		{
			"searchValue": null,
			"createBy": null,
			"createTime": "2022-09-19 10:56:14",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"params": {},
			"id": 3,
			"khbzId": 9,
			"khbzName": "2018年村长工作考核制度",
			"khbm": "**县水务局",
			"khbmId": null,
			"khsx": "河长巡河",
			"score": 40,
			"khnr": "河长巡河频次",
			"pfff": "按照市级工作方案要求",
			"khfs": "现场抽查、查阅资料",
			"sort": 1,
			"zl": "ssfa,gzzd"
		},
		{
			"searchValue": null,
			"createBy": null,
			"createTime": "2022-09-20 13:47:45",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"params": {},
			"id": 4,
			"khbzId": 9,
			"khbzName": "2018年村长工作考核制度",
			"khbm": "**县水务局",
			"khbmId": null,
			"khsx": "环境保护",
			"score": 10,
			"khnr": "垃圾清理",
			"pfff": "按照市级工作方案要求",
			"khfs": "现场抽查、查阅资料",
			"sort": 1,
			"zl": "ssfa"
		},
		{
			"searchValue": null,
			"createBy": null,
			"createTime": "2022-09-20 17:28:59",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"params": {},
			"id": 5,
			"khbzId": 9,
			"khbzName": "2018年村长工作考核制度",
			"khbm": "**县",
			"khbmId": 100,
			"khsx": "111",
			"score": 10,
			"khnr": "12121",
			"pfff": null,
			"khfs": null,
			"sort": 1,
			"zl": ""
		},
		{
			"searchValue": null,
			"createBy": null,
			"createTime": "2022-09-20 17:29:19",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"params": {},
			"id": 6,
			"khbzId": 9,
			"khbzName": "2018年村长工作考核制度",
			"khbm": "**县",
			"khbmId": 100,
			"khsx": "111",
			"score": 10,
			"khnr": "1",
			"pfff": null,
			"khfs": null,
			"sort": 1,
			"zl": ""
		},
		{
			"searchValue": null,
			"createBy": null,
			"createTime": "2022-09-21 09:59:14",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"params": {},
			"id": 7,
			"khbzId": 10,
			"khbzName": "2019年村长工作考核制度",
			"khbm": "**县",
			"khbmId": 100,
			"khsx": "测试1",
			"score": 10,
			"khnr": "233",
			"pfff": null,
			"khfs": null,
			"sort": 1,
			"zl": ""
		},
		{
			"searchValue": null,
			"createBy": null,
			"createTime": "2022-09-21 09:59:52",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"params": {},
			"id": 8,
			"khbzId": 10,
			"khbzName": "2019年村长工作考核制度",
			"khbm": "**县",
			"khbmId": 100,
			"khsx": "测试1",
			"score": 20,
			"khnr": "阿打发",
			"pfff": null,
			"khfs": null,
			"sort": 2,
			"zl": ""
		},
		{
			"searchValue": null,
			"createBy": null,
			"createTime": "2022-09-21 10:00:09",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"params": {},
			"id": 9,
			"khbzId": 10,
			"khbzName": "2019年村长工作考核制度",
			"khbm": "**县水务局",
			"khbmId": 101,
			"khsx": "1212",
			"score": 20,
			"khnr": "122",
			"pfff": null,
			"khfs": null,
			"sort": 0,
			"zl": ""
		}
	],
      //data里面需要合并的项以及对应的spanArr和pos
      mergerItems: [
        {   columnIndex:0,
            spanArr: [],
            pos: 0,
            prop: 'khbzName'
        },
        {   columnIndex:1,
            spanArr: [],
            pos: 0,
            prop: 'khbm'
        },
        {   columnIndex:2,
            spanArr: [],
            pos: 0,
            prop: 'khsx'
        }]

    };
  },

created() {
    this.getSpanArr(this.khxzList, this.mergerItems)
  },
 methods: {
  getSpanArr(data, array) {//循环数据处理
      for (let n = 0; n < array.length; n++) {
          array[n].spanArr = []//数据清空(重新调此方法的时候需要清空上一次的数据)
          for (let i = 0; i < data.length; i++) {
              if (i === 0) {
                  array[n].spanArr.push(1);
                  array[n].pos = 0;
              } else {
                  // 判断当前元素与上一个元素是否相同
                  if (data[i][array[n].prop] === data[i - 1][array[n].prop]) {
                      array[n].spanArr[array[n].pos] += 1;
                      array[n].spanArr.push(0);
                  } else {
                      array[n].spanArr.push(1);
                      array[n].pos = i;
                  }
              }
          }
      }
        console.log(this.mergerItems)
		},
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {//这里判断第几列需要合并
          let item = this.mergerItems.find(item => item.columnIndex === columnIndex)
          const _row = item.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
              rowspan: _row,
              colspan: _col,
          }
      }
    },
  }

存在问题，不同制度的表格被合并了，如图所示，

2.继续优化；
在这个数组里增加了parent参数，用来确保该条数据是属于哪个父级的，可多级判断

//data里面需要合并的项以及对应的spanArr和pos
      mergerItems: [
        {   columnIndex:0,
            spanArr: [],
            pos: 0,
            prop: 'khbzName',
            parent:[]
        },
        {   columnIndex:1,
            spanArr: [],
            pos: 0,
            prop: 'khbm',
            parent:['khbzId']
        },
        {   columnIndex:2,
            spanArr: [],
            pos: 0,
            prop: 'khsx',
            parent:['khbzId','khbmId']
        }]

新增了判断当前元素与上一个元素是否相同的逻辑

getSpanArr(data, array) {//循环数据处理
      for (let n = 0; n < array.length; n++) {
          array[n].spanArr = []//数据清空(重新调此方法的时候需要清空上一次的数据)
          for (let i = 0; i < data.length; i++) {
              if (i === 0) {
                  array[n].spanArr.push(1);
                  array[n].pos = 0;
              } else {
                  
                  // 判断当前元素与上一个元素是否相同
                  let flag = true;
                  for (let j = 0; j < array[n].parent.length; j++){
                    
                    if(data[i][array[n].parent[j]] !== data[i - 1][array[n].parent[j]]){
                      flag = false;
                      break;
                    }
                  }
                  if (flag && data[i][array[n].prop] === data[i - 1][array[n].prop]) {
                      array[n].spanArr[array[n].pos] += 1;
                      array[n].spanArr.push(0);
                  } else {
                      array[n].spanArr.push(1);
                      array[n].pos = i;
                  }
              }
          }
      }
	},

最终得到效果

层级关系处理清楚了，但是鼠标移动上去显示样式不太美观；

继续增加样式优化，挺费劲~~~搁置了；