el-table表格列宽自适应处理

在最近的项目中，有这么一个需求，就是要表格的列宽随内容的宽度自适应。

将代码复制到指令中即可使用。通过指令方式进行调用。（使用方式 <el-table v-tableFit></el-table>）
通过计算文字的宽度进行表头设置，其他内容无法计算。
40(列) * 120(行) 个单元格以上根据实际情况使用以上根据实际情况使用，因为单元格越多，计算时间越长。
尽量使用v-if，不然有些情况下会计算错误

Vue.directive("tableFit", {//指令所在组件的 VNode 及其子 VNode 全部更新后调用。componentUpdated(el, binding, vnode) {setTimeout(() => {adjustColumnWidth(el, vnode);}, 0)},
});function adjustColumnWidth(table, vnode) {//中文和全角正则const CN = new RegExp("[\u4E00-\u9FA5]|[\uFF00-\uFFFF]");const NUM = new RegExp("[0-9]");//中文和全角字体的像素宽度比例const CN_RATE = 1.1//数字字体的像素宽度比例const NUM_RATE = 0.7//其他字体的像素宽度比例const OTHER_RATE = 0.6const columns = vnode.child.columns.slice()//忽略序号、多选框、已设置宽度的表头for (let i = columns.length - 1; i >= 0; i--) {if (columns[i].width || columns[i].type === 'index' || columns[i].type === 'selection') {columns.splice(i, 1)}}const colDefs = columns.map(item => item.id)//设置每列宽度colDefs.forEach((clsName, index) => {//colgroup中 和 表头标签的class名相同  通过class寻找相同列const cells = [...table.querySelectorAll(`.el-table__body-wrapper td.${clsName}`),...table.querySelectorAll(`th.${clsName}`),];const widthList = cells.map((el) => {const cell = el.querySelector(".cell")if (cell) {let fontSize = parseInt(window.getComputedStyle(cell,null).fontSize)fontSize = fontSize ? fontSize : 14//处理多行内容取最大宽度let strList = cell.innerText.split('\n')let strWidth = strList.map(item => {let width = 0//计算每个字符的宽度for(let str of item) {if(CN.test(str)) {width += fontSize * CN_RATE}else if(NUM.test(str)) {width += fontSize * NUM_RATE}else {width += fontSize * OTHER_RATE}}return Math.ceil(width)})return Math.max(...strWidth)} else {return 0}});//取一列中的最大宽度const max = Math.max(...widthList);if (max !== 0) {//在表格数据中设置minWidth 防止尺寸变化重新计算原来的宽度columns[index].minWidth = max + 20table.querySelectorAll(`col[name=${clsName}]`).forEach((el) => {el.setAttribute("width", max + 20);});}});//设置完后调用el-table方法更新布局vnode.child.doLayout()tableRevise(table)
}

解决错位的问题

//没有错位的可以忽略
//修正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表格列宽自适应处理相关推荐

table表格列宽动态调整方案
在做表格的时候,设置好的列宽却因为数据太长导致换行,想让它自己调整宽度,但是现在elementUI组件好像还没有这个功能.所以自己写了一个方法实现它. 一个动态改变表格列宽的方法该方法实现了自适应列 ...
html表格宽度拖拽,原生js实现拖拽改变 table表格列宽
table 员工编号试用时间转正时间性别姓名拼音生日时间民族身高 vh20180421 2018-3-13 2018-6-13 1 LDH 1988-3-13 汉族 178 vh2018 ...
antd 表格列宽自适应方法以及错误处理
当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量也就是没有设置宽度的列会平分表格中余下的宽度在antd 的表格中, 当你不设置表格滚动, 并且你给每一列 ...
JAVA使用POI-TL生成word表格列宽自定义
上篇文章介绍了如何使用POI-TL对生成的表格进行列宽自适应和表格内容居中.使用poi-tl组件根据模板生成word文件(解决表格列宽自适应问题) 今天又接到一个需求,如何自定义表格的列宽? 研究了P ...
html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案
Js拖拽实现改变Table的列宽如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...
el-table列宽自适应；el-table表格的列根据内容自动撑满；el-table内容换行问题；
原文链接重点就一个方法 :width="flexColumnWidth('date',tableData)" 第一个参数是这个列的字段第二个参数是这个表格的数据只需要给对应的 ...
el-table某列的列宽自适应，其他列按比例分配。
情景一:例如首列按照内容自适应展开,其余列有各自的比例. 注意点: 给需要自适应展开的列加 :width="flexColumnWidth"计算方法就可以自适应展开需要给余下所 ...
【java基础知识】设置表格内容居中显示，表格字体大小调整，表格列宽调整
一.表格内容居中显示通过Netbeans创建表格后,默认表头和表格内容全部偏左显示,想要手动修改,需要先将自动创建的表格类改为public类型. 然后在表格代码部分后面添加下面代码: 1.表头居中显 ...
HTML 锁定表格首行首列、拖拽表格列宽
摘自:http://s.yanghao.org/program/viewdetail.php?i=61717 因为与自己的实际情况有些不同,简单的改造了下...如果有版权问题,请留言... 锁定Tab ...

el-table表格列宽自适应处理

el-table表格列宽自适应处理相关推荐

最新文章

热门文章