element-Ui 表格,自定义计算 合并单元格

23 篇文章 0 订阅
3 篇文章 0 订阅

需求


- ui画的表格需要根据不同的数据项,进行合并不确定的单元格
- 标题3会有不确定的项且进行合并
- 在这里插入图片描述

官网


示例没毛病

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

使用1


先合并两个试试水,更改后,标题没合并

 if ( columnIndex === 0 && rowIndex==2) {
        if (rowIndex %2==0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        }
        else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

在这里插入图片描述

优化


1.对于条件要明确,比如我需要第三行开始到第四行合并,

//那我第一个条件必须要把第三第四行放进来
//rowIndex > 1 也是要指明位置 (0.1.2.3.4)
//总数-1是我要计算的位置在倒数第二行
//loadColSpan 合并不确定的数目的单元格
   if (columnIndex === 0 && rowIndex > 1 && rowIndex <(总数-1)) {
   //指明第三行
          if (rowIndex ==2) {
            return {
              rowspan: this.loadColSpan,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element表格是一种流行的前端UI框架,用于构建直观可交互的网页界面。在element表格中插入小计和合计是一种常见需求,可以通过代码来实现。 首先,我们需要在element表格中定义一个列属性,该列属性用于显示小计。可以使用“el-table-column”标签,并将“type”属性设置为"index",表示该列为索引列。然后,在“el-table-column”标签中定义一个插槽“header”,在这个插槽中可以自定义小计显示的内容。通过计算表格数据集合的长度,我们可以得到小计的值,并将其展示在插槽中。 接着,我们需要在element表格的最后一行插入合计。可以使用“el-table-column”标签,并将“type”属性设置为"index",同样,也可以在“el-table-column”标签中定义一个插槽“header”,在这个插槽中可以自定义合计显示的内容。通过遍历整个表格数据集合,我们可以将每一行的某一列的值相加,从而得到合计的值,并将其展示在插槽中。 最后,将修改后的表格组件引入到我们的网页中即可看到效果。通过插入小计和合计,我们可以更好地展示数据的汇总信息,提高了数据可读性和理解性。 总结来说,通过使用“el-table-column”标签和插槽的自定义能力,我们可以在element表格中插入小计和合计,从而更好地展示数据的汇总信息。这样做能够提高表格的可读性、理解性,并对数据进行更全面的分析和解读。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值