elementui 表格表头换行_解决element-ui表格表头内容太长时的换行问题

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

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

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

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

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

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

HTML:

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

elementui 表格表头换行_解决element-ui表格表头内容太长时的换行问题相关推荐

elementui文本框换行_解决Element UI input输入框不能使用回车进行搜索
css怎么让输入框不显示光标? css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大 ...
解决element UI 表格el-table增加列会震动抖动的问题
beforeUpdate(){this.$nextTick(() => {this.$refs.myTable.doLayout();}) }, 在element UI里面有一个doLayout ...
layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
element ui 图片加载失败_解决Element UI - el-image 图片初始化加载失败问题
最近使用elementUI的el-image发现经常会出现加载src失败的情况,问题估计就是e-image的src路径一旦初始化加载失败的话就没有异步刷新,(这个地方需要注意过这个问题的大佬解读下源码 ...
表格中的内容过长时不换行，以tips方式展示
http://element-cn.eleme.io/2.0/#/zh-CN/component/table 有两点需要注意: ①el-table标签中需要添加tooltip-effect=" ...
vb手动输入字符串(SQL语句)太长时怎么换行输入
Dim str As String = "abc" &"def" & "ghi"
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...

elementui 表格表头换行_解决element-ui表格表头内容太长时的换行问题

elementui 表格表头换行_解决element-ui表格表头内容太长时的换行问题相关推荐

最新文章

热门文章