el-table表头根据内容自适应完美解决表头错位和固定列错位


Posted in Javascript onJanuary 07, 2021

将代码复制到指令中即可使用。通过指令方式进行调用。(使用方式 <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 ? fontSize : 14
    let width = 0
    //计算每个字符的宽度
    for(let str of cell.innerText) {
     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)
   } else {
    return 0
   }
  });
  
  //取一列中的最大宽度
  const max = Math.max(...widthList);
  if (max !== 0) {
   //在表格数据中设置minWidth 防止尺寸变化重新计算原来的宽度
   //20 + 2  20 是cell类的padding 2 是给予额外空间
   columns[index].minWidth = max + 22
   table.querySelectorAll(`col[name=${clsName}]`).forEach((el) => {
    el.setAttribute("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)
  }
 }
}

到此这篇关于el-table表头根据内容自适应完美解决表头错位和固定列错位 的文章就介绍到这了,更多相关el-table 自适应内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
javascript常见操作汇总
Sep 03 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 #Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 #Vue.js
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 #Javascript
JavaScript实现滑块验证解锁
Jan 07 #Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 #Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 #Javascript
JS中多层次排序算法的实现代码
Jan 06 #Javascript
You might like
php win下Socket方式发邮件类
2009/08/21 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
phpfpm的作用和用法
2019/10/10 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python实现中文文本分句的例子
2019/07/15 Python
Django用户身份验证完成示例代码
2020/04/03 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
课程设计心得体会
2013/12/28 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
建筑管理专业求职信
2014/07/28 职场文书
感谢师恩主题班会
2015/08/17 职场文书
python实现网络五子棋
2021/04/11 Python