el-table表頭怎么根據內容實現自適應

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)
  }
 }
}

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。