el-table表头根据内容自适应完美解决表头错位和固定列错位
将代码复制到指令中即可使用。通过指令方式进行调用。（使用方式
通过计算文字的宽度进行表头设置，其他内容无法计算。
5000个单元格以上根据实际情况使用以上根据实际情况使用，因为单元格越多，计算时间越长。
尽量使用v-if，不然有些情况下会计算错误。
Vue.directive("tableFit",{
//指令所在组件的VNode及其子VNode全部更新后调用。
componentUpdated(el,binding,vnode){
setTimeout(()=>{
adjustColumnWidth(el,vnode);
},0)
},
});
functionadjustColumnWidth(table,vnode){
//中文和全角正则
constCN=newRegExp("[\u4E00-\u9FA5]|[^\uFF00-\uFFFF]");
constNUM=newRegExp("[0-9]");
//中文字体的像素宽度比例
constCN_RATE=1.1
//数字字体的像素宽度比例
constNUM_RATE=0.65
//其他字体的像素宽度比例
constOTHER_RATE=0.5
constcolumns=vnode.child.columns.slice()
//el-table通过colgroup标签设置html宽度
constcolgroup=table.querySelector("colgroup");
constcolDefs=[...colgroup.querySelectorAll("col")];
//忽略设置了宽度序号多选框的列
//判断gutter是否已存在
constgutter=colgroup.querySelector(`col[name=gutter]`)
constgutterx=colgroup.querySelector(`col[name=gutterx]`)
letexcept=0
if(gutter||gutterx){
//删除gutter
colDefs.pop()
}
//若有序号多选框则删除
except=colDefs.length-columns.length
colDefs.splice(0,except)
for(leti=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寻找相同列
constclsName=col.getAttribute("name");
constcells=[
...table.querySelectorAll(`.el-table__body-wrappertd.${clsName}`),
...table.querySelectorAll(`th.${clsName}`),
];
constwidthList=cells.map((el)=>{
constcell=el.querySelector(".cell")
if(cell){
letfontSize=parseInt(window.getComputedStyle(cell,null).fontSize)
fontSize=fontSize?fontSize:14
letwidth=0
//计算每个字符的宽度
for(letstrofcell.innerText){
if(CN.test(str)){
width+=fontSize*CN_RATE
}elseif(NUM.test(str)){
width+=fontSize*NUM_RATE
}else{
width+=fontSize*OTHER_RATE
}
}
returnMath.ceil(width)
}else{
return0
}
});
//取一列中的最大宽度
constmax=Math.max(...widthList);
if(max!==0){
//在表格数据中设置minWidth防止尺寸变化重新计算原来的宽度
//20+220是cell类的padding2是给予额外空间
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错位
functiontableRevise(table){
consttableWrapper=table.querySelector('.el-table__body-wrapper')
consttableBody=table.querySelector('.el-table__body')
constcolgroup=table.querySelector("colgroup");
/**
*(以下数值为滚动条高度，可以自己根据情况通过class重新修改)
*/
//内容大于容器时
if(tableBody.clientWidth>tableWrapper.offsetWidth){
//设置x轴滚动
tableWrapper.style.overflowX='auto'
//解决固定列错位（没有错位的可以忽略以下内容）
letfixedWrap=table.querySelectorAll('.el-table.el-table__fixed-body-wrapper')
if(fixedWrap.length>0){
fixedWrap.forEach(item=>{
item.style.paddingBottom=8+'px'
})
}
//解决固定列覆盖滚动条
letfixed_left=table.querySelector('.el-table.el-table__fixed')
letfixed_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时自己新增一个
constgutter=colgroup.querySelector(`col[name=gutter]`)
constgutterx=colgroup.querySelector(`col[name=gutterx]`)
if(!gutter&&!gutterx){
letcol=document.createElement('col')
col.setAttribute('name','gutterx')
col.setAttribute('width','8')
colgroup.appendChild(col)
}
}
}
到此这篇关于el-table表头根据内容自适应完美解决表头错位和固定列错位的文章就介绍到这了,更多相关el-table自适应内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！