vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue el-table增加合计行

前端vue中el-table增加合计行及合并单元格代码示例

作者:枪白

在有些情况下我们会有合并表头、合并列、合并尾部合计的需求,这篇文章主要给大家介绍了关于前端vue中el-table增加合计行及合并单元格的相关资料,需要的朋友可以参考下

自己总结的,不好别喷,谢谢~~~

先看效果图

表格触发调用方法

<el-table :align="rowTableCenter" id="tables" :data="data"
                          :summary-method="addTotal"  :show-summary="true"  border>
                  <el-table-column label="序号" type="index" align="center"/>

合计行代码

在 合计行方法中 直接去修改了表格样式

//合计行
    addTotal(param) {
      const { columns, data } = param;
      // console.log(columns)
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0 ) {
          console.log(column)
          column.colSpan = 4;  //行占用格数
          column.rowSpan = 1;  //列占用格数
          sums[index] = '权重得分合计';
        }
        if(index !== 0 && index !== 4){
          column.rowSpan = 0;
          column.colSpan = 0;
          // column.style = {
          //   "display":"none"  //这里加了但是没有作用效果
          // }
          console.log(column)
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if(index === 4){
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            // sums[index] = 'N/A';
          }
        }
      });
//在合计行方法中直接去修改了单元格样式
      //合并单元格
      this.$nextTick(() => {
        const tds = document.querySelectorAll('#tables .el-table__footer tr>td');
        console.log(tds)
        tds.forEach(function (val, index) {
          if (tds[0].innerText === '权重得分合计') {
            if(index !== 0 && index !== 4){
              val.style.display = 'none';
            }else{
              val.style.textAlign = 'center';
            }
            // val.style.display = 'none';
            // val.style.fontSize = '16px';
            // val.style.borderColor = '#aaaaaa';
            // val.style.color = '#fff';
          }
        })
      }, 1000)
      return sums;
    },

总结

到此这篇关于前端vue中el-table增加合计行及合并单元格的文章就介绍到这了,更多相关vue el-table增加合计行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文