首页 > 其他 > 详细

Vue 列表标题换行且剧中

时间:2020-07-21 22:17:43      阅读:180      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

 

 

列表表头列属性
<el-table-column prop="earningsTotal" label="累计收益率 (今年以来)" min-width=110px // 设置最大宽度

header-align="center"//设置列表表头居中
                              :render-header="renderHeader">  // 列标题 Label 区域渲染使用的 Function
</el-table-column>

脚本方法:
methods:{
        renderHeader(createElement, { column}) { 
                console.log(createElement)      //  function (a, b, c, d) { return createElement(vm, a, b, c, d, true); };
                const label = column.label 
                const labelArr = label.split(‘ ‘) 
                return createElement( 
                             ‘span‘,     //创建最外层的标签可随意
                             [ 
                                 createElement(‘span‘, {  // 创建第一个元素的标签可随意
                                 attrs: { type: ‘text‘ } 
                                 },[labelArr[0]] ), 
                                 createElement(‘p‘, {  // 创建第二个元素的标签可随意 
                                 attrs: { type: ‘text‘, style: ‘font-size:12px‘ } // 给分割的某个元素单独加样式
                                 }, [labelArr[1] || ‘‘] ) 
                             ]
                 ) 
         }
}

  

Vue 列表标题换行且剧中

原文:https://www.cnblogs.com/BraveBoy/p/13356853.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!