iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vueelement-uiel-table组件自定义合计(summary-method)的坑
  • 800
分享到

vueelement-uiel-table组件自定义合计(summary-method)的坑

vueelement-uivueel-tableel-table组件自定义合计 2023-02-12 15:02:36 800人浏览 薄情痞子
摘要

目录element-ui el-table组件自定义合计(summary-method)坑element-ui中的el-table组件时,自定义合并表头和合并行1、合并相同数据的行2

element-ui el-table组件自定义合计(summary-method)坑

项目需要用到表格,带有合计功能的,照搬的element-ui的table组件,但是合计就是不出来

因为表格是客操作的,所以都是用的自定义内容

自定义的方法也是官方的

后面找问题发现,红框圈住的地方一直是undefined,才发应过来,在表格上应该需要写 prop的,完了写了

改成这样,每一列需要计算的都加了,就ok了

希望对遇到问题的童鞋一个帮助!

element-ui中的el-table组件时,自定义合并表头和合并行

在使用element-ui中的el-table组件时,怎么自定义合并表头和合并行

1、合并相同数据的行

效果图如下,合并相同名称的行

img

代码如下:

data(){
		return{
			tableData1:[{a:6},{a:12},{a:7},{b:6},{b:7},{c:44}]
		}
}

在el-table头中加入:span-method=“arraySpanMethod”,span-method:合并行或列的计算方法

// 合并列筛选
    flitterData (arr) {
      let spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          if (item && arr[index - 1] && item.a === arr[index - 1].a) { // 第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr
      }
    },
    // 合并相同列
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let data = [];
        data = this.tableData1;
        const _row = (this.flitterData(data).one)[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },

2、自定义合并表头

table自带合并属性:rowSpan和colSpan,所以合并表头的思路是:获取所有的表头单元格,针对性的对需要合并的单元格进行操作。

类似下面这种表头的合并

img

比如我们想要合并的是第n列和第n+1列,那么我们先获取到所有的表头,然后将第n列表头的colSpsn设为2,将第n+1列表头的display设为none。

备注:

  • el-table__header:是你table的class名,自定义,也可以使用Vue中的ref去定义,然后使用this.$refs.xxx去拿到
  • .rows[0]是拿到table的第一行(rows行)
  • cells:中文的意思是:单元格。就是我们获取一行(rows)后,这一行中有多少单元格,一行中所有的单元格集合,可以理解cells为这个行的第几列
  • colSpan:跨多少列(单元格自带的属性)
  • display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
methods: {
    setColSpan:function() {
      //this.$refs.el-table__header
      // console.log(document.getElementsByClassName("el-table__header"))
      // 获取表头的所有单元格
      let n = document.getElementsByClassName("el-table__header")[0].rows[0].cells
      // 将第二列表头单元格的colSpan设为2
      n[1].colSpan = 2
      // 将第三列表头单元格的display设为none
      n[2].style.display = 'none'
    },
},


mounted() {
    // 注意一定要保证DOM渲染完成后在进行合并操作,否则会找不到元素
    this.$nextTick(function(){
      this.setColSpan();
    })
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vueelement-uiel-table组件自定义合计(summary-method)的坑

本文链接: https://www.lsjlt.com/news/195725.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作