木灵鱼儿

木灵鱼儿

阅读：634

最后更新：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就是被合并的格子。

文章分类 vue 项目实战
文章标签 vueelementtable合并表格
木灵鱼儿

木灵鱼儿

发布了 638 篇文章获得点赞 8获得阅读 634

版权申明

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

one
two
three

关于作者

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

相关文章

行为模式：备忘录模式行为模式：备忘录模式
vuex 动态注册和卸载模块vuex 动态注册和卸载模块
行为模式：中介者模式行为模式：中介者模式
行为模式：观察者模式行为模式：观察者模式
行为模式：迭代器模式行为模式：迭代器模式