el-table表頭根據內容自適應完美解決表頭錯位和固定列錯位
將代碼復制到指令中即可使用。通過指令方式進行調用。(使用方式 <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 自適應內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue完美實現el-table列寬自適應
- ant desing vue table 實現可伸縮列的完整例子
- el-table-column 內容不自動換行的解決方法
- element 表格多級表頭子列固定的實現
- vue中el-table實現自動吸頂效果(支持fixed)