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设计一个日历表
Dec 03 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 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中的登陆login
2007/01/18 PHP
php中explode函数用法分析
2014/11/15 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
Python中自定义函数的教程
2015/04/27 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python3.5安装python3-tk详解
2019/04/26 Python
python 日期排序的实例代码
2019/07/11 Python
python基础教程之while循环
2019/08/14 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
捐款倡议书范文
2014/02/02 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
建筑工地标语
2014/06/18 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android