將代碼復(fù)制到指令中即可使用。通過指令方式進(jìn)行調(diào)用。(使用方式 )

通過計(jì)算文字的寬度進(jìn)行表頭設(shè)置，其他內(nèi)容無法計(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名相同 通過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ì)算原來的寬度

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ò)位

沒有錯(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ù)情況通過class重新修改)

*/

//內(nèi)容大于容器時(shí)

if (tableBody.clientWidth > tableWrapper.offsetWidth) {

//設(shè)置x軸滾動(dòng)

tableWrapper.style.overflowX = 'auto'

//解決固定列錯(cuò)位 (沒有錯(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)'

}

//解決表頭偏移

//沒有原生的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ǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。