element?ui設(shè)置table自適應(yīng)表格寬,不自動(dòng)換行問題

更新時(shí)間：2023年12月06日 16:47:24 作者：想吃手撕面包

這篇文章主要介紹了element?ui設(shè)置table自適應(yīng)表格寬,不自動(dòng)換行問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

element ui設(shè)置table自適應(yīng)表格寬,不自動(dòng)換行

在我們平常開發(fā)使用element ui中的table時(shí)，會(huì)出現(xiàn)數(shù)據(jù)過長自動(dòng)換行的結(jié)果，

如果把寬給死的情況下也不太適合，接下來提供二種方式去動(dòng)態(tài)計(jì)算每個(gè)盒子的寬度。

第一種方式

表格加** table-layout='auto’ **屬性
表格加tableAuto類名
el-table-column標(biāo)簽不設(shè)置寬度

<el-table :data="tableData"  table-layout='auto' class="tableAuto">
     <el-table-column prop="name" label="名稱" />
 </el-table>

// 設(shè)置超出不折行
<style>
.tableAuto.el-table .cell {
  white-space: nowrap;
}
</style>

但這種方式純在二個(gè)問題

1.el-table-column左側(cè)多個(gè)列加fixed屬性，左右滑動(dòng)，列寬得提前計(jì)算

2.el-table設(shè)置table-layout='auto’ 與固定表頭的功能沖突，表頭無法再固定

第二種方式（推薦使用第二種方式）

第二種方式就是通過canvas動(dòng)態(tài)計(jì)算el-table-column寬度，可以完美解決第一種方式的2中弊端。

<template>
  <el-table>
     <el-table-column :width="flexWidth(item.en, tableData, item.cn)"></el-table-column>
   </el-table>
</temolate>
<script>
/**
 * dynamicCalculationWidth
 * @param string | number prop 每列的prop 可傳''
 * @param array tableData 表格數(shù)據(jù)
 * @param string | number title 標(biāo)題長內(nèi)容短的，傳標(biāo)題  可不傳
 * @param number num 列中有標(biāo)簽等加的富余量
 * @returns 每列的寬度
 * 注：prop,title有一個(gè)必傳
 */
 dynamicCalculationWidth(prop, tableData, title, num = 0) {
      if (tableData.length === 0) {
        // 表格沒數(shù)據(jù)不做處理
        return
      }
      let flexWidth = 0 // 初始化表格列寬
      let columnContent = '' // 占位最寬的內(nèi)容
      let canvas = document.createElement('canvas')
      let context = canvas.getContext('2d')
      context.font = '14px Microsoft YaHei'
      if (prop === '' && title) {
        // 標(biāo)題長內(nèi)容少的，取標(biāo)題的值,
        columnContent = title
      } else {
        // 獲取該列中占位最寬的內(nèi)容
        let index = 0
        for (let i = 0; i < tableData.length; i++) {
          const now_temp = tableData[i][prop] + ''
          const max_temp = tableData[index][prop] + ''
          const now_temp_w = context.measureText(now_temp).width
          const max_temp_w = context.measureText(max_temp).width
          if (now_temp_w > max_temp_w) {
            index = i
          }
        }
        columnContent = tableData[index][prop]
        // 比較占位最寬的值跟標(biāo)題、標(biāo)題為空的留出四個(gè)位置
        const column_w = context.measureText(columnContent).width
        const title_w = context.measureText(title).width
        if (column_w < title_w) {
          columnContent = title || '占位符呀'
        }
      }
      // 計(jì)算最寬內(nèi)容的列寬
      let width = context.measureText(columnContent)
      flexWidth = width.width + 40 + num
      return flexWidth + 'px'
    },
    </script>