el-table 固定表头,el-table表格错位
这篇文章主要介绍了埃尔表表头根据内容自适应完美解决表头错位和固定列错位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
将代码复制到指令中即可使用。通过指令方式进行调用。(使用方式埃尔表垂直表适合/el表)
通过计算文字的宽度进行表头设置，其他内容无法计算。
5000个单元格以上根据实际情况使用以上根据实际情况使用，因为单元格越多，计算时间越长。
尽量使用如果，不然有些情况下会计算错误。
Vue.directive(tableFit ，{
//指令所在组件的虚拟节点及其子虚拟节点全部更新后调用。
componentUpdated(el，binding，vnode) {
setTimeout(()={
adjustColumnWidth(el，vnode)；
}, 0)
},
});
函数adjustColumnWidth(table，vnode) {
//中文和全角正则
常数CN=新regexp([\u4e00-\u9fa5][^\uff00-\uffff])；
const NUM=new RegExp([0-9])；
//中文字体的像素宽度比例
常数CN_RATE=1.1
//数字字体的像素宽度比例
常数数量比率=0.65
//其他字体的像素宽度比例
const OTHER_RATE=0.5
const列=vnode。孩子。列。切片()
//el表通过列组标签设置超文本标记语言宽度
const colgroup=table。查询选择器(“colgroup”)；
const colDefs=[.colgroup。query selector all( col )]；
//忽略设置了宽度序号多选框的列
//判断排水沟是否已存在
const gutter=col组。查询选择器(` col[name=gutter]`)
const gutterx=列组。查询选择器(` col[name=gutterx]`)
假设except=0
if (gutter gutterx) {
//删除排水沟
colDefs.pop()
}
//若有序号多选框则删除
除了寒冷的EFS。长度-列。长度
colDefs.splice(0，except)
对于(让I=列。长度-1；I=0；我- ) {
如果(列【我】。宽度){
colDefs.splice(i，1)
columns.splice(i，1)
}
}
//设置每列宽度
colDefs.forEach((col，index)={
//列组中和表头标签的班级名相同通过班级寻找相同列
const cls name=col . get属性( name )；
常量单元格=[
.桌子。查询全选(`。El-table _ _ body-wrapper TD .${clsName} `)，
.table.querySelectorAll(`th .${clsName} `)，
];
常数宽度列表=单元格。map((El)={
const cell=el.querySelector( .单元格)
如果（单元格){
设fontSize=parse int(window。getcomputedstyle(单元格，null).字体大小)
fontSize=fontSize？字体大小：14
让宽度=0
//计算每个字符的宽度
for(let str of cell.innerText) {
if(CN.test(str)) {
width=fontSize * CN_RATE
}else if(NUM.test(str)) {
width=fontSize * NUM_RATE
}否则{
width=fontSize * OTHER_RATE
}
}
return Math.ceil(宽度)
}否则{
返回0
}
});
//取一列中的最大宽度
const max=Math.max(.宽度列表)；
如果(max！==0) {
//在表格数据中设置最小宽度防止尺寸变化重新计算原来的宽度
//20 2 20 是细胞类的填充2是给予额外空间
列[索引]。最小宽度=最大22
桌子。查询选择器all(` col[name=$ { clsName }]`).forEach((el)={
el.setAttribute(width ，最大22);
});
}
});
//设置完后调用埃尔表方法更新布局
vnode.child.doLayout()
表格修订（表格)
}
修正表格表头，固定列错位
没有错位的可以忽略
//修正埃尔表错位
函数表修订（表){
const表包装=表。查询选择器(.El-table _ _ body-wrapper’)
const表体=表。查询选择器(.El-table _ _ body’)
const colgroup=table。查询选择器(“colgroup”)；
/**
* (以下数值为滚动条高度，可以自己根据情况通过班级重新修改)
*/
//内容大于容器时
if(表体。客户端宽度表包装。offsetwidth){
//设置x轴滚动
餐桌包装。风格。溢出x=自动
//解决固定列错位（没有错位的可以忽略以下内容)
让固定换行=表格。查询selectorall(.埃尔表El-table _ _固定主体包装)
if (fixedWrap.length 0) {
fixedWrap.forEach(item={
item.style.paddingBottom=8 px
})
}
//解决固定列覆盖滚动条
设fixed _ left=table。查询选择器(.埃尔表El-table _ _ fixed’)
设fixed _ right=table。查询选择器(.埃尔表El-table _ _固定-右)
if (fixed_left) {
固定_左侧。风格。height= calc(100%-8px)
}
if (fixed_right) {
固定_右。风格。height= calc(100%-8px)
}
//解决表头偏移
//没有原生的排水沟时自己新增一个
const gutter=col组。查询选择器(` col[name=gutter]`)
const gutterx=列组。查询选择器(` col[name=gutterx]`)
如果(!阴沟！gutterx) {
让col=document。createelement(“列”)
col.setAttribute(name ， gutterx )
col.setAttribute(width ， 8 )
colgroup.appendChild(col)
}
}
}
到此这篇关于埃尔表表头根据内容自适应完美解决表头错位和固定列错位的文章就介绍到这了，更多相关埃尔表自适应内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。