木灵鱼儿

木灵鱼儿

阅读:131

最后更新:2021/08/27/ 18:23:21

关于element table合并格子的思路

效果图

需要将第一个col值相同的格子row进行合并。

实现

element的表格提供了一个span-method方法,该方法会为每个格子运行一次。

比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。

有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。

<script>
export default {
  methods: {
    spanMethod({columnIndex}) {
      if(columnIndex===0) {
        //每行第一个格子
      }
    }
  }
}
</script>

那么就可以控制代码的运行了,节省运算。

思路

给每一个row数据对象添加一个mergeData属性,里面包含了合并的数据。

mergeData: {
  rowspan: 0,  //往下合并几行
  colspan: 0,  //往右合并几列
}

通过对比上一行与下一行的固定字段数据,如果是全等的,那么说明上下两个格子可以合并,mergeData中让rowspan加1即可。

然后我们将上一行抛出去,与第三行进行对比。为此我们使用reduce方法,这个方法的特殊就是可以将return出的数据,作为下次运行的参数使用。

代码

<script>
export default {
  methods: {
    spanMethod({row,columnIndex}) {
      if(columnIndex===0) {
        //每行第一个格子
         return row.mergeData;
      }
    }
  },
  //合并的表格计算
  calcTableMergeData(tbody) {
      tbody.reduce((oldRow, newRow, index) => {
        const { account: oldAccount } = oldRow;
        const { account: newAccount } = newRow;

        //判断是否与上一个相同的Account
        if (oldAccount !== newAccount) {
          oldRow.mergeData = oldRow.mergeData ?? { rowspan: 1, colspan: 1 };
          newRow.mergeData = { rowspan: 1, colspan: 1 };
          return newRow;
        } else {
          //相等
          newRow.mergeData = { rowspan: 0, colspan: 0 };

          const { rowspan } = oldRow.mergeData ?? { rowspan: 1, colspan: 1 };
          oldRow.mergeData = { rowspan: rowspan + 1, colspan: 1 };
          return oldRow;
        }
      });


      return tbody;
    },
}
</script>

calcTableMergeData可以放在赋值给tbody之前计算一次就行了,比如api获取数据后,我们需要将数据赋值给table的数据变量,在赋值之前运行calcTableMergeData计算一次即可。

注意

element的table的合并的属性很奇葩,经个人测试遵循以下几条标准:

  1. 如果该格子没有发生合并,需要返回{ rowspan: 1, colspan: 1 }
  2. 如果该格子发生了合并,需要返回{ rowspan: x, colspan: x };x就是需要合并的格子,参考原生html中table的rowspan和colspan属性
  3. 如果该格子被合并了,需要返回{ rowspan: 0, colspan: 0 }

被合并的意思就是,比如有两行row数据,row1和row2,此时,row1向下合并了row2,那么row2就是被合并的格子。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 8
文章被阅读 131

相关文章