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禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
vue.js表格分页示例
Oct 18 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
js实现滑动进度条效果
Aug 21 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
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP常用数组函数介绍
2014/07/28 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php自定义apk安装包实例
2014/10/20 PHP
php之可变变量的实例详解
2017/09/12 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
jQuery的attr与prop使用介绍
2013/10/10 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
vue项目实战总结篇
2018/02/11 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
js实现3D旋转相册
2020/08/02 Javascript
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
大学生学年自我鉴定
2014/02/10 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
放射科岗位职责
2015/02/14 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
导游词之天津古文化街
2019/11/09 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js