300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > elementui 表格表头换行_解决element-ui表格表头内容太长时的换行问题

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

时间:2018-12-27 11:28:21

相关推荐

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: able-head,style:{width

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。