element table 合计 第一行 固定列

element table 合计 第一行

在这位大哥这里学来的, 但同时我这边的情况是: 固定高度, 第一列固定, 参数多, 因此, 这个方法不能够完全满足, 因此加入以下代码:

代码作用: 在每次获取到表格数据时进行操作, 因为固定列后, 第一列滚动到最底部都样式错乱.

watch: {
  tableData: {
    handler: function (newName, oldName) {
      this.$nextTick(() => {
        // 改变合计行样式
        // const s_table = document.getElementsByClassName('cell')
        // for (let i = 0; i < s_table.length; i++) {
         //  if (s_table[i].innerHTML === '合计') {
         //    s_table[i].setAttribute('style', 'visibility: initial !important')
          //   break
         //  }
        // }
        setTimeout(() => {
          this.$refs.multipleTable.bodyWrapper.scrollTop = 5
          this.$refs.multipleTable.doLayout()
        }, 0);
      })
    },
    immediate: true,
    deep: true
  }
}

同时 我的样式中补充了一些以对应我的表格样式:
我的表格设置: 固定高度: 800, 第一列固定列, 开启了可勾选

/deep/ .el-table__footer-wrapper {
 margin-top: -2px;
}
// 表格启用fixed属性后,修复样式错乱
/deep/ .el-table__fixed-body-wrapper {
 top: 139px !important;
}
/deep/ .el-table__fixed-footer-wrapper {
 z-index: -1;
 display: none;
}
/deep/ .el-table__fixed {
 height: 784px !important;
}
// 新增加样式 这样可以不用遍历获取cell来进行更改( 显示合计 )
/deep/.el-table .cell {
 visibility: initial !important;
 text-align: center;
}

bug

横向滚动到末尾时依旧会有表格错乱

之前有试过不限制高度, 然后表格显示正常, 后面有时间再翻回来看看.

同时合计行会长脚跑掉…