在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图:

使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然element-ui中提供了width和min-width这个属性可以自由设置。

但是因为要做的表格很多,而且要一一计算比例然后再赋值给width也是一件很繁琐的事。

认真看了几遍element-ui中table的文档后,发现了一个这样的属性  render-header,文档中描述为列标题 Label 区域渲染使用的 Function,即渲染这一列的列标题区域所用的函数。

不了解这个函数的使用方法的可以去查看vue文档中渲染函数这一节,有很详细的解释。

然后我就利用这个函数重新设置列标题的宽度,下面是代码:

HTML:

<el-table border :data="tableData" v-loading="loading" @row-dblclick="handleSelect"
:row-class-name="tableRowClassName">
<el-table-column v-for="(item,index) in tableColumn" :label="item.name"
:prop="item.prop" v-if="item.show" :key="index" align="center" :render-header="labelHead"></el-table-column>
</el-table>

VUE:

    methods:{
labelHead(h,{column,index}){
let l = column.label.length
let f = 16 //每个字大小,其实是每个字的比例值,大概会比字体大小差不多大一点,
column.minWidth = f*l //字大小乘个数即长度 ,注意不要加px像素,这里minWidth只是一个比例值,不是真正的长度
            //然后将列标题放在一个div块中,注意块的宽度一定要100%,否则表格显示不完全
return h('div',{class:'table-head',style:{width:'100%'}},[column.label]) },
//.......
}

css:

 .table-head{
font-size:14px!important;//设置固定的字体大小
}

最后的效果图:

当表格过小时每个表头会有一个最小值以保持单头不换行继续单行排列,底部出现滚轮,表格很大时就会自动分配剩余空间。

------------------------------------------------------------------更新-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

继续往下写的过程中又遇到了问题:在使用element-ui table的排序功能时,因为上述已经将包含表头文字的div块的宽度设置成了100%,这样一来,排序图标就被迫向下移,表头行又换行了!!!

解决方法是:自己写样式覆盖原有的element-ui样式,将排序图标设置成绝对定位

.el-table .cell{
position:relative;
}
.el-table .caret-wrapper{
position:absolute;
top:2px;
right:;
}

这个时候,会发先当表格足够小的时候,图片会遮挡文字,如图:

可以把该图标想象成每个表头标题又添加了一个文字,只需要在计算比例的时候,将这个图片也算成一个文字长度就可以了(ps:因为图片的大小与设置的文字大小差不多)

 let l = column.label.length
let f =
column.minWidth = f*(l+)//加上一个文字长度
return h('div',{class:'table-head',style:{width:'100%'}},[column.label])

最后效果图:

最后的最后,当然偶尔也会有特殊需求,有时需要某一列特别宽,而不是代码里写的那样的比例,就可以直接在html里加上width属性,最后这个属性值会覆盖render-header计算出来的属性值,而其他的没有设置固定宽的列仍然会按比例分配。

————--------------------------------------------------------------------------------------------又更新---------------------------------------------------------------------------------------------------------------------------------------

感谢@ 哓番茄 的回复,我才发现自己少了点东西,因为element-ui本身的样式结构,表头内部有一定的padding值,通过上文计算出来的宽度比例,直接渲染到表头仍然会出现表头宽度不够,多出的部分文字变成省略号的情况,因此需要将表头内部的padding值去掉:

 .el-table .cell, .el-table th div{
padding:0!important;
}
.el-table tr td .cell{
padding:5px 2px !important;
}
.el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
padding-left:0 !important;
}

需要注意的是,这些样式直接写到组件内部是不起作用的,想要覆盖element-ui原本的样式,我用的方法是新建了一个css文件,将样式写在该文件里,然后引入到main.js中,就可以覆盖element-ui原来的样式。如果需要局部覆盖,在要改变的table上新加一个类名,再按html找到相应节点去覆盖。

解决element-ui表格表头内容太长时的换行问题的更多相关文章

  1. element ui表格表头顺序错乱的问题

    因为在项目中两个表格共用了同一个组件, 但由于表头不完全相同, 就通过v-if来控制表头的显示隐藏,没想到造成了表头顺序的错乱, 经过多方查找资料,最后找到了解决方法: 即为每一列el-table-c ...

  2. element ui表格相同内容自动合并

    一开始觉得合并单元格很困难,什么鬼,后来仔细查看api,发现是可以实现的,特此记录下,直接看代码, 项目需求是第一列和第二列还有第16列需要相同内容进行合并,所以判断条件是不同的: 实现后效果如下: ...

  3. html中使用js实现内容过长时部分

    有时数据内容太长时我们并不希望其全部显示出来,因为这样可能会导致用于显示这些内容的标签被撑开影响美观. 这时就希望能够实现默认只显示部分内容,在鼠标放上去的时候再将全部的内容显示出来. 这里提供一个简 ...

  4. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  5. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  6. Echarts x轴文本内容太长的几种解决方案

    Echarts 标签中文本内容太长的时候怎么办 ? - 1对文本进行倾斜 在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111", ...

  7. WinForm中遇到Label要显示的内容太长,自动换行

    很多朋友都会在开发WinForm中遇到Label要显示的内容太长,但却不能换行的问题.这里我总结了几种方法,供大家参考. 第一种是把Label的AutoSize属性设为False,手动修改Label的 ...

  8. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

  9. ligerui有时候竖直的线没对齐,是因为某一列的内容太长,此刻可以调整一下此列的宽度为适当的值便可消除此现象

    ligerui有时候竖直的线没对齐,是因为某一列的内容太长,此刻可以调整一下此列的宽度为适当的值便可消除此现象

随机推荐

  1. 微信小程序环境配置和开发!!

    1.登陆微信公众平台小程序,下载 普通小程序开发者工具.或者 小游戏开发者工具. 2.新建项目需要填以下几点,然后初始demo如下,注意rpx是分成750份的单位. 3.点击预览,用微信扫描二维码,代 ...

  2. 基础系列(1)-- html

    (随笔杂谈,自己做的笔记) 网页的组成 结构  ------  xhtml,xml 表现  ------  css 行为  ------  bom,dom,ECMAScript html5结构 < ...

  3. 解决 new file()在IOS下不兼容 的问题

    最近 做项目,做的要是拍照后上传相片,以file格式上传..所以 拍照 后用canvas生成base64格式再转file..在PC和安卓都是没有问题,到IOS上面不行..new file后就是生成一个 ...

  4. vue-quill-editor富文本编辑器 中文翻译组件,编辑与展示

    vue项目中用到了富文本编辑器,网上找了一些,觉得vue-quill-editor最好用, ui简洁,功能也好配,够用了,文档不好读,有些小细节需要自己注意,我懒得分析,就封装成了组件 大家用的时候直 ...

  5. webrtc (6) 在Webrtc中集成VideoToolbox

    来源:http://blog.csdn.net/wangruihit/article/details/46550853 VideoToolbox是iOS平台在iOS8之后开放的一个Framework, ...

  6. Python从零开始——基本数据类型

  7. Linux shell if条件判断2

    前面介绍linux shell的if判断的语法,现在再补充一点. Linux shell if条件判断1 分支判断结构     if , case   下面两个结构语法,已经在前面有过示例. 结构1: ...

  8. Ubuntu 开发环境搭建教程

    Ubuntu 开发环境搭建教程 本文原始地址:https://sitoi.cn/posts/18425.html 更新 sudo apt upgrade sudo apt update 生成本机密钥 ...

  9. Congigure SSL in StoreFront

    StoreFront SSL Requirements StoreFront website must be up and running in http Joined to the domain C ...

  10. 通过vjudge刷Uva的题目(解决Uva网站打开慢的问题)

    最近在跟着算法竞赛入门经典刷题,发现Uva网站打开超级慢,进个主页面都需要好几秒.后来发现可以通过vjudge网站刷Uva的题目,很是方便,在这mark一下,顺便做一下推荐. vjudge网址:htt ...