el-table合并行+数据按照相同名称排序+相同名称内的数据在排序

项目场景:

项目需求:

 后端给我返回的数据:


原因分析:

        后端数据所有的内容排列是无顺序的 相同名称的不一定靠在一起 图片只是巧合,如果按照后端返回的格式直接赋给表格的tabledata那么顺序就不是我们想要的,所以我们首先要把数据处理成我们想要的数据格式。

        ①根据需求首先把数据里的相同名称进行排序然后在将相同名称里的版本从高到低排序

        ②将名称相同的合并成一行并将序号也进行合并


解决方案:

需求①:

this.tableData = res.data.data.sort((a, b) => {

            return a.name > b.name ? 1 : -1;

});

就一段代码将这两个问题全部解决 将数据拿到sort排序根据排序规则进行处理完后的数据赋值给表格

需求②:

表格排序首先在el-table 标签里加一个属性          :span-method="objectSpanMethod"

objectSpanMethod 有四个参数分别是  row, column, rowIndex, columnIndex , 代表的意思是当前行row  当前列column  当前行号rowIndex  当前每一个数据对应的列号columnIndex(6个数据就是6组)

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row);
      // console.log(column);
      // console.log(rowIndex);
      // console.log(columnIndex);
      if (columnIndex === 0 || columnIndex === 1) {
        //第一列相同名称的行被合并
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    flitterData(arr) {
      let spanOneArr = [],
        concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          if (item.name === arr[index - 1].name) {
            //第一列根据相同name合并
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },

if (columnIndex === 0 || columnIndex === 1)  这句话的意思就是第0列 和 第1列的数据需要被合并 合并规则走判断通过的代码

猜你喜欢

转载自blog.csdn.net/weixin_63443983/article/details/127082915
今日推荐