vue element table 表格合计- 列合并

先上效果图

vue element table 表格合计- 列合并_第1张图片

合计所在列  占用 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)
        }
      }
    }

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

你可能感兴趣的:(vue.js,javascript,前端)