el-table-column 内容不自动换行的解决方法


Posted in Vue.js onAugust 14, 2022

场景

使用ElementUI中的Table 表格时,如果列内容超过列宽,会默认换行,如下

el-table-column 内容不自动换行的解决方法

这样看起来不美观,还有可能引起其它样式问题。那么如何解决呢?

方式一

使用Table组件自带的show-overflow-tooltip属性

参数说明类型可选值默认值show-overflow-tooltip当内容过长被隐藏时显示 tooltipBoolean—false

添加该属性之后,如果内容超出列宽,超长部分会默认省略。当鼠标滑过该内容时,会弹出Tip提示

<!--示例-->
<el-table-column
     prop="departName"
     label="部门"
     show-overflow-tooltip
       >
</el-table-column>

el-table-column 内容不自动换行的解决方法

注:该属性谨慎使用,如果多列使用且内容较多时,会影响页面性能

方式二

计算每列最大宽度,使内容不换行;配合设置最大字符长度,可以解决大多数场景问题。接下来展示最基础的列宽计算方式

示例如下

/**
 * 使用span标签包裹内容,然后计算span的宽度 width: px
 * @param valArr
 */
 function getTextWidth(str) {
    let padding = 0;//单元格左右padding距离
    let width = 0;
    let span = document.createElement('span');
    span.innerText = str;
    span.className = 'getwidth';
    document.querySelector('body').appendChild(span);
    // 这里可以获取当前单元格的font-size 以及 内容的中英文、字母等  做更精确的计算
    width = document.querySelector('.getwidth').offsetWidth+padding;
    document.querySelector('.getwidth').remove();
    return width;
}

/**
* 遍历列的所有内容,获取最宽一列的宽度
* @param {Array} arr 需要计算的数据
* @param {Number} minwidth 列最小宽度
*/
function getMaxLength (arr,minwidth=60) {
    return arr.reduce((acc, item) => {
        if (item) {
            let calcLen = getTextWidth(item);
            if (acc < calcLen) {
                acc = calcLen;
            }
        }
        return acc<minwidth?minwidth:acc;
    }, 0)
}

/**
* @description 计算列表列宽(把内容撑开)
* @param {Array} columns 列的数组
* @param {Array} tableArr 列表的数组
* */
function calcColumnsWidth(columns, tableArr) {
    columns.forEach((item) => {
        const arr = tableArr.map((x) => x[item.props]);
        item.width = getMaxLength(arr);
        arr.push(item.label); // 把每列的表头也加进去算
    });
    return columns;
}

<!--获取列表数据之后,计算每列最大宽度-->
let res = await this.axios.post('/api/xxx/xxxx'); 
if(res.data.data.length > 0){
    const columns = calcColumnsWidth(this.tableHead, res.data.data);
    this.tableHead = columns;
}

效果如下:列宽自动撑开,列表宽度不够时,底部会出现滚动轴。

el-table-column 内容不自动换行的解决方法

 到此这篇关于el-table-column 内容不自动换行的解决方法的文章就介绍到这了,更多相关el-table-column 不自动换行内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 #Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 #Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 #Vue.js
Vue深入理解插槽slot的使用
Aug 05 #Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 #Vue.js
vue递归实现树形组件
Jul 15 #Vue.js
VUE递归树形实现多级列表
Jul 15 #Vue.js
You might like
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
js常用函数 不错
2006/09/08 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
Augularjs-起步详解
2016/07/08 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
Python构建图像分类识别器的方法
2019/01/12 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
pytorch打印网络结构的实例
2019/08/19 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
应届生保险求职信
2013/11/11 职场文书
求职简历推荐信范文
2013/12/02 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
给朋友的赠语
2015/06/23 职场文书
爱国主题班会教案
2015/08/14 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
利用Python实现Picgo图床工具
2021/11/23 Python