vue element table 表格合计- 列合并

最新推荐文章于 2024-08-28 14:27:55 发布

Amy##

最新推荐文章于 2024-08-28 14:27:55 发布

阅读量392

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Amy126/article/details/133163063

版权

先上效果图

合计所在列占用 4 个列

相关代码：

travelInvoices 是表格 :data="travelInvoices" 中的定义

watch: {
      //合计行 合并单元格
      travelInvoices: {
        // immediate: true,
        handler() {
          setTimeout(() => {
              const tds = document.querySelectorAll('.el-table__footer-wrapper tr>td');//找到合计所在的td信息
              tds[0].colSpan = 4;//设置列合并参数=4
              tds[0].style.textAlign = 'center';//设置文字居中
              tds[1].style.display = 'none';//设置第二列隐藏
              tds[2].style.display = 'none';//设置第三列隐藏
              tds[3].style.display = 'none';//设置第四列隐藏
          }, 0)
        }
      }
    }

参考了别人的做法调整的，参考地址找不到了