el table 固定表头和首行_el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...
將代碼復(fù)制到指令中即可使用。通過(guò)指令方式進(jìn)行調(diào)用。(使用方式 )
通過(guò)計(jì)算文字的寬度進(jìn)行表頭設(shè)置，其他內(nèi)容無(wú)法計(jì)算。
5000個(gè)單元格以上根據(jù)實(shí)際情況使用以上根據(jù)實(shí)際情況使用，因?yàn)閱卧裨蕉?#xff0c;計(jì)算時(shí)間越長(zhǎng)。
盡量使用v-if，不然有些情況下會(huì)計(jì)算錯(cuò)誤。Vue.directive("tableFit", {
bind(el, binding, vnode) {
setTimeout(() => {
setColumnWidth(el, vnode);
}, 0)
},
//指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
componentUpdated(el, binding, vnode) {
setTimeout(() => {
setColumnWidth(el, vnode);
}, 0)
},
});
function setColumnWidth(table, vnode) {
//中文和全角正則
const CN = new RegExp("[\u4E00-\u9FA5]|[\uFF00-\uFFFF]");
const NUM = new RegExp("[0-9]");
//中文和全角字體的像素寬度比例
const CN_RATE = 1.1
//數(shù)字字體的像素寬度比例
const NUM_RATE = 0.7
//其他字體的像素寬度比例
const OTHER_RATE = 0.6
const columns = vnode.child.columns.slice()
//忽略序號(hào)、多選框、已設(shè)置寬度的表頭
for (let i = columns.length - 1; i >= 0; i--) {
if (columns[i].width || columns[i].type === 'index' || columns[i].type === 'selection') {
columns.splice(i, 1)
}
}
const colDefs = columns.map(item => item.id)
//設(shè)置每列寬度
colDefs.forEach((clsName, index) => {
//colgroup中 和 表頭標(biāo)簽的class名相同 通過(guò)class尋找相同列
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
//處理多行內(nèi)容取最大寬度
let strList = cell.innerText.split('\n')
let strWidth = strList.map(item => {
let width = 0
//計(jì)算每個(gè)字符的寬度
for(let str of item) {
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)
})
return Math.max(...strWidth)
} else {
return 0
}
});
//取一列中的最大寬度
const max = Math.max(...widthList);
if (max !== 0) {
//在表格數(shù)據(jù)中設(shè)置minWidth 防止尺寸變化重新計(jì)算原來(lái)的寬度
columns[index].minWidth = max + 20
table.querySelectorAll(`col[name=${clsName}]`).forEach((el) => {
el.setAttribute("width", max + 20);
});
}
});
//設(shè)置完后調(diào)用el-table方法更新布局
vnode.child.doLayout()
tableRevise(table)
}
修正表格表頭，固定列錯(cuò)位
沒(méi)有錯(cuò)位的可以忽略//修正el-table錯(cuò)位
function tableRevise(table) {
const tableWrapper = table.querySelector('.el-table__body-wrapper')
const tableBody = table.querySelector('.el-table__body')
const colgroup = table.querySelector("colgroup");
/**
* (以下數(shù)值為滾動(dòng)條高度，可以自己根據(jù)情況通過(guò)class重新修改)
*/
//內(nèi)容大于容器時(shí)
if (tableBody.clientWidth > tableWrapper.offsetWidth) {
//設(shè)置x軸滾動(dòng)
tableWrapper.style.overflowX = 'auto'
//解決固定列錯(cuò)位 (沒(méi)有錯(cuò)位的可以忽略以下內(nèi)容)
let fixedWrap = table.querySelectorAll('.el-table .el-table__fixed-body-wrapper')
if (fixedWrap.length > 0) {
fixedWrap.forEach(item => {
item.style.paddingBottom = 8 + 'px'
})
}
//解決固定列覆蓋滾動(dòng)條
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)'
}
//解決表頭偏移
//沒(méi)有原生的gutter時(shí)自己新增一個(gè)
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)
}
}
}
總結(jié)
以上是生活随笔為你收集整理的el table 固定表头和首行_el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： jvm对于java的意义_谈谈对JVM的
- 下一篇： java集合概念