时间:2021-05-28
将代码复制到指令中即可使用。通过指令方式进行调用。(使用方式 <el-table v-tableFit></el-table>)
通过计算文字的宽度进行表头设置,其他内容无法计算。
5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间越长。
尽量使用v-if,不然有些情况下会计算错误。
没有错位的可以忽略
//修正el-table错位function tableRevise(table) { const tableWrapper = table.querySelector('.el-table__body-wrapper') const tableBody = table.querySelector('.el-table__body') const colgroup = table.querySelector("colgroup"); /** * (以下数值为滚动条高度,可以自己根据情况通过class重新修改) */ //内容大于容器时 if (tableBody.clientWidth > tableWrapper.offsetWidth) { //设置x轴滚动 tableWrapper.style.overflowX = 'auto' //解决固定列错位 (没有错位的可以忽略以下内容) let fixedWrap = table.querySelectorAll('.el-table .el-table__fixed-body-wrapper') if (fixedWrap.length > 0) { fixedWrap.forEach(item => { item.style.paddingBottom = 8 + 'px' }) } //解决固定列覆盖滚动条 let fixed_left = table.querySelector('.el-table .el-table__fixed') let fixed_right = table.querySelector('.el-table .el-table__fixed-right') if (fixed_left) { fixed_left.style.height = 'calc(100% - 8px)' } if (fixed_right) { fixed_right.style.height = 'calc(100% - 8px)' } //解决表头偏移 //没有原生的gutter时自己新增一个 const gutter = colgroup.querySelector(`col[name=gutter]`) const gutterx = colgroup.querySelector(`col[name=gutterx]`) if (!gutter && !gutterx) { let col = document.createElement('col') col.setAttribute('name', 'gutterx') col.setAttribute('width', '8') colgroup.appendChild(col) } }}到此这篇关于el-table表头根据内容自适应完美解决表头错位和固定列错位 的文章就介绍到这了,更多相关el-table 自适应内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了vueel-table实现自定义表头的具体代码,供大家参考,具体内容如下el-table可以通过设置Scopedslot来实现自定义表头。文
本文实例讲述了JS实现的表头列头固定页面功能。分享给大家供大家参考,具体如下:这里的示例演示了一个table页面,并固定表头或者列头,以达到excel冻结列的效
CSS两列布局,右侧固定,左侧自适应宽度这是右侧的内容这是左侧的内容,自适应宽度CSS两列布局,左侧固定,右侧自适应宽度中间内容,自适应宽度CSS三列布局,左右
前面已经介绍过单列定宽单列自适应的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式。本文将从float、table和flex来介绍两列
先看看ElementUI里关于el-table的template数据结构:再看看ElementUI里关于el-table的data数据结构:exportdefa