el-table-column 内容不自动换行

场景

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

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

方式一

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

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

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

<!--示例-->
<el-table-columnprop="departName"label="部门"show-overflow-tooltip>
</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 内容不自动换行相关推荐

layui中table表格内容过多自动换行
表格超出内容没有自动换行,超出部分需要自动换行. 允许长单词换行到下一行:p.test {word-wrap:break-word;}
css tr标签自动换行,HTML中table设置td标签内容过多自动换行
今天遇到一个小问题,需要解决table标签中td标签内容过多自动换行的问题. 因为之前有经验(无论是内容过多省略显示还是内容过多换行都做过),这次的需求是内容过多换行显示. 首先在 table 上增加 ...
Bootstrap table列内容过长，显示固定长度，超过内容隐藏
今天在使用bootstrap的时候,某一列的内容长度过于长,导致table表格显示错位,非常的不美观,因此,觉得想一个办法,将其所在列的宽度设置为定值,令其超过指定长度的时候,隐藏超过指定 ...
java中table是什么标签_[Java教程]javascript格式化table标签内容
[Java教程]javascript格式化table标签内容 0 2015-07-12 20:00:08 项目中遇到这样的需求,一大段文章正文的html代码在手机中显示不全,原因是由于其它有table ...
element table 组件内容换行方案
element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> ...
如何打印出lua里table的内容
不像开发as3时用fb有强大的断点调试功能,一般lua开发不用什么高级的ide,貌似也没有适合的,就直接用sublime.exvim等文本编辑器,直接编译运行看结果.所以不能很方便的知道变量值,特别是 ...
ant design table column 设置width不生效解决方案
ant design table column 设置width不生效解决方案参考文章: (1)ant design table column 设置width不生效解决方案 (2)https://ww ...
“ORA-01747: user.table.column, table.column 或列说明无效” 的解决方案
"ORA-01747: user.table.column, table.column 或列说明无效" 的解决方案参考文章: (1)"ORA-01747: user.t ...
外部表报错：ORA-29913: 执行 ODCIEXTTABLEOPEN 调出时出错 ORA-29400: 数据插件错误KUP-04043: table column not found in ext
oracle 为11g,报以下错误: ORA-29913: 执行 ODCIEXTTABLEOPEN 调出时出错 ORA-29400: 数据插件错误KUP-04043: table column not ...
Jquery导出页面表格table的内容为Excel，PDF，DOC格式
Jquery导出页面表格table的内容为Excel,PDF,DOC格式文档地址:http://www.jqueryfuns.com/resource/2381 1.引入jquery的js–这里就不 ...

el-table-column 内容不自动换行

场景

方式一

方式二

el-table-column 内容不自动换行相关推荐

最新文章

热门文章