铁雪资源网 Design By www.gsvan.com
将代码复制到指令中即可使用。通过指令方式进行调用。(使用方式 <el-table v-tableFit></el-table>)
通过计算文字的宽度进行表头设置,其他内容无法计算。
5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间越长。
尽量使用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.65 //其他字体的像素宽度比例 const OTHER_RATE = 0.5 const columns = vnode.child.columns.slice() //el-table通过colgroup标签设置html宽度 const colgroup = table.querySelector("colgroup"); const colDefs = [...colgroup.querySelectorAll("col")]; //忽略 设置了宽度 序号 多选框 的列 //判断gutter是否已存在 const gutter = colgroup.querySelector(`col[name=gutter]`) const gutterx = colgroup.querySelector(`col[name=gutterx]`) let except = 0 if (gutter || gutterx) { //删除gutter colDefs.pop() } //若有序号 多选框则删除 except = colDefs.length - columns.length colDefs.splice(0, except) for (let i = columns.length - 1; i >= 0; i--) { if (columns[i].width) { colDefs.splice(i, 1) columns.splice(i, 1) } } //设置每列宽度 colDefs.forEach((col, index) => { //colgroup中 和 表头标签的class名相同 通过class寻找相同列 const clsName = col.getAttribute("name"); 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 "width", max + 22); }); } }); //设置完后调用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) } } }
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无el-table表头根据内容自适应完美解决表头错位和固定列错位的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?