element el-table表格内容宽度自适应，不换行，不隐藏

AI小奶龙

已于 2024-03-04 16:49:06 修改

阅读量3.9k

点赞数 17

文章标签： vue.js 前端 javascript

于 2024-02-27 20:11:57 首次发布

本文链接：https://blog.csdn.net/qq_53986004/article/details/136330717

版权

本文介绍了如何使用Vue和ElementUI的el-table组件实现表格宽度的自适应，通过计算内容和表头的最大长度动态设置列宽，提供了一个实用的js函数来封装这一功能。

摘要由CSDN通过智能技术生成

2024.2.27今天我学习了如何用el-table实现表格宽度的自适应，当我们动态渲染表格数据的时候，有时候因为内容太多会出现挤压换行的效果：

思路来自：

ElementUI中el-table表格列宽自适应以及封装_el-table表格太大-CSDN博客

根据这个博主的写法做了一些改进，增加了表格表头和内容拼接获取最大长度。

我们需要根据内容的最大长度设置动态的宽度，这边我在utils里面封装了一个js：

/**
 * el-table扩展工具  -- 列宽度自适应
 * @param {*} prop 字段名称(string)
 * @param {*} tableData table数据列表集(array)
 * @returns 列宽(int)
 */
export function getColumnWidth(label, prop, tableData) {
  //label表头名称
  //prop对应的内容
  //tableData表格数据

  const minWidth = 80 // 最小宽度
  const padding = 10 // 列内边距
  let arr = tableData.map(item => item[prop])
  arr.push(label)//拼接内容和表头数据
  const contentWidths = arr.map(item => {
    const value = item ? String(item) : ''
    const textWidth = getTextWidth(value)
    return textWidth + padding
  })
  const maxWidth = Math.max(...contentWidths)
  return Math.max(minWidth, maxWidth)
}

/**
 * el-table扩展工具  -- 列宽度自适应 - 获取列宽内文本宽度
 * @param {*} text 文本内容
 * @returns 文本宽度(int)
 */
function getTextWidth(text) {
  const span = document.createElement('span')
  span.style.visibility = 'hidden'
  span.style.position = 'absolute'
  span.style.top = '-9999px'
  span.style.whiteSpace = 'nowrap'
  span.innerText = text
  document.body.appendChild(span)
  const width = span.offsetWidth + 40
  document.body.removeChild(span)
  return width
}

然后在main.js中引入：

import {getColumnWidth} from '@/utils/el_table_content_width_adaptation'


//el-table表格内容宽度自适应
Vue.prototype.elTableAdaptationWidth = getColumnWidth

然后在页面中直接调用就可以了：

<el-table>
<el-table-column 
        v-for="item in tableList" 
        :label="item.label" 
        :prop="item.prop"
        :min-width="elTableAdaptationWidth(item.label,item.prop,tableList)"
        />
</el-table>

效果如下：