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 = 5this.$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

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

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

同时合计行会长脚跑掉…

element table 合计第一行固定列相关推荐

layui表格table固定表头第一行固定显示
layui表格table固定表头第一行固定显示代码示例如下: layui.use('table', function(){$ = layui.jquery;var table = layui.tab ...
element plus之el-table行融合+列融合+小计行+自定义控件+样式自定义方案
期望通过每一次分享,让技术的门槛变低,落地更容易. -- around 目录 1.行&列融合 2.小计行 3.自定义控件 4.样式自定义前言旨在解决项目过程中遇到基于el-table实现项 ...
antd Table 实现表格行固定
需求: antd Table 只有列固定和表头固定,但是我的需求是行固定前三行固定. 实现步骤方式一.表格固定行(rowClassName 实现) 思路是 :用position: sti ...
element表格实现合并行或列，实现斜线表头
文章目录前言一.合并行或列实现效果完整代码二.斜线表头实现效果完整代码总结前言 element的table是常用的组件,在使用中会出现一些特殊的需求,这里总结了两个案例. 一.合并行 ...
table表格实现行、列冻结
客户要求实现对表格数据的头几行或者头几列进行冻结,即滚动时保持这几行/列不动,通过网上查找代码,参考已有的代码的思路,实现了可以任意对行.列进行冻结. 实现原理: 创建多个div,div之间通过css ...
06 - table表格标签+ 行合并+列合并
1.table 表格标签属性在小程序中查看 cellspacing="0" 表格边框合并: 表格:table 行:tr 列:td 属性: ...
VUE element-ui 之table表格第一行插入输入框
步骤: 模板中配置列: <el-table-column label="序号" width="70" align="center"&g ...
iview table组件里的固定列表格不自适应问题
当在使用iview Table组件里固定列功能时出现表格不自适应宽度问题具体如下解决这个bug 很简单把组件里的 width 改为 minWidth 即可 columns: [{title: ...
element table相同数据行合并
哈喽,最近公司都在赶项目在做的过程中也踩了不少的坑,现在来记录下先来讲下Vue+Element使用table表格的合并功能.最后的效果如下图(主要涉及到表格行列合并): 主要思路由于项目后期数据报表 ...

element table 合计第一行固定列

element table 合计第一行

bug

element table 合计第一行固定列相关推荐

最新文章

热门文章

element table 合计 第一行 固定列

element table 合计 第一行

bug

element table 合计 第一行 固定列相关推荐

最新文章

热门文章

element table 合计第一行固定列

element table 合计第一行

element table 合计第一行固定列相关推荐