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

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

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

javascript 复制代码
//el-table表格内容宽度自适应
const content_width_adaptation_js = {
  flexColumnWidth(label, prop, table_data) {
    //label表格列表
    //prop列表对应的数据
    //table_data表格数据
    const arr = table_data.map(item => item[prop])
    arr.push(label)
    // 自动撑开表格内容最大宽度
    function getMaxLength(arr) {
      return arr.reduce((acc, item) => {
        if (item) {
          const calcLen = getTextWidth(item)
          if (acc < calcLen) {
            acc = calcLen
          }
        }
        return acc
      }, 0)
    }
    // 自动撑开表格内容最大宽度
    function getTextWidth(str) {
      let width = 0
      const html = document.createElement('span')
      html.innerText = str
      html.className = 'getTextWidth'
      document.querySelector('body').appendChild(html)
      width = document.querySelector('.getTextWidth').offsetWidth
      document.querySelector('.getTextWidth').remove()
      return width
    }
    return (getMaxLength(arr) + 40) + 'px'
  },
}
export default content_width_adaptation_js

然后在main.js中引入:

javascript 复制代码
import elTableAdaptationWidth from '@/utils/el_table_content_width_adaptation'


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

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

html 复制代码
<el-table>
<el-table-column 
        v-for="item in tableList" 
        :label="item.label" 
        :prop="item.prop"
        :width="elTableAdaptationWidth(item.label,item.prop,tableList)"
        />
</el-table>

效果如下:

相关推荐
brief of gali1 分钟前
记录一个奇怪的前端布局现象
前端
计算机毕设指导65 分钟前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
前端拾光者40 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理