当前位置:首页 » 《随便一记》 » 正文

前端 vue el-table 增加合计行及合并单元格

28 人参与  2024年02月25日 17:11  分类 : 《随便一记》  评论

点击全文阅读


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

先看效果图

 表格触发调用方法

<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;    },

 


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/69904.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 未婚夫女兄弟把婚车改成宠物灵车,我反手让她的宾利变破烂最新阅读_魏成鸣乔诗诗林书妍小编推荐_小说后续在线阅读_无删减免费完结_
  • 军训当天男友为校花虐功勋犬,重生后我杀疯了潜力榜_顾野杜璇闻言大结局_小说后续在线阅读_无删减免费完结_
  • 天塌了!大佬们全被我捡回家了阿昭,小白,李惊雪小说整本+后续(阿昭,小白,李惊雪)清爽版阅读
  • 重生八零,我笑看真千金用土气布料卖港商免费阅读_妹妹姜雅沈俊爆款_小说后续在线阅读_无删减免费完结_
  • 秦昭:+后续人物讨喜无套路全集手握一把刀,砍翻万道!
  • 狸奴抓伤阿娘后,我和爹提议换个娘后续_阿爹阿娘宁王最新阅读_小说后续在线阅读_无删减免费完结_
  • 盛夏没有晴天小说(阮苏梨,傅屿安,宋颖)小说结尾+隐藏篇章(盛夏没有晴天阮苏梨,傅屿安,宋颖)畅享阅读
  • 全书浏览天降好运?村西头疯婆子是神医!(李萍萍周大孙月娘)_天降好运?村西头疯婆子是神医!(李萍萍周大孙月娘)全书结局
  • 校园星芒爱与科幻的交织(苏然林悦)全书浏览_校园星芒爱与科幻的交织全书浏览
  • 包浆修复师从核到银河(苏星摇豆汁儿于乾)_包浆修复师从核到银河
  • 小说大结局小说风入江云小说已更新+特别篇(柳江云,喜鹊,萧桉)纯净版
  • 连若涵,江屿白,秦知意小说(老婆为十个替身逼我卖身,我走后她悔疯了)序章+全章阅读(连若涵,江屿白,秦知意)最新章节

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1