在用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. android studio学习----通过github的URL怎么导入新的工程

    这一切的前提是你装了git,有了github帐号,之后就很简单,但是导入之后交给android studio 也会发生各种编译错误,这个时候就需要自己去一一解决了,主要还是  引用依赖版本的问题 第一 ...

  2. 分库分表的情况下生成全局唯一的ID

    分库分表情况下 跨库的问题怎么解决? 分布式事务怎么解决? 查询结果集集合合并的问题? 全局唯一的id怎么解决? 一般要求:1.保证生成的ID全局唯一,不可重复 2.生成的后一个Id必须大于前一个Id ...

  3. 分布式CAP定理

    根据百度百科的定义,CAP定理又称CAP原则,指的是在一个分布式系统中,Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性),最 ...

  4. Ubuntu Pycharm下deeplab ImportError: cannot import name 'monitoring'

    1.使用pycharm运行deeplab过程中出现ImportError: cannot import name 'monitoring' 2.把root用户及非root用户中pip安装的tensor ...

  5. MySQL数据物理备份之lvm快照

    使用lvm快照实现物理备份 优点: 几乎是热备(创建快照前把表上锁,创建完后立即释放) 支持所有存储引擎 备份速度快 无需使用昂贵的商业软件(它是操作系统级别的) 缺点: 可能需要跨部门协调(使用操作 ...

  6. 【HttpServlet】HttpServlet类

    创建时间:6.15 HttpServlet 但在实际开发中,我们不会直接去实现Servlet接口,因为那样需要覆盖的方法太多,    我们一般创建类继承HttpServlet 实现步骤: 1)创建类继 ...

  7. 子网掩码的作用与IP网段的划分

    公有IP地址分类 A类:1.0.0.0 到 127.255.255.255主要分配 给大量主机而局域网网络数量较少的大型网络 B类:128.0.0.0 到191.255.255.255 一般用于国际性 ...

  8. Nat类型测试

    这是一个测试NAT类型的小工具,一般也没太多用处,只有游戏玩家可能需要用来测试你的网络NAT类型是什么.NAT类型一般分为以下4种: 1. Full Cone NAT (完全圆锥型)2. Restri ...

  9. Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'com.qingmu.mybaitsplus.mapper.UserMapper' available:

    java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.conte ...

  10. 201871010133-赵永军《面向对象程序设计(java)》第二周学习总结

    201871010133-赵永军<面向对象程序设计(java)>第二周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...