需求是 表格表头要换行,不但换行,还要只定字的大小
于是我找到了render-header这个属性
效果图
dome层
<el-table-column prop="earningsTotal" label="累计收益率 (今年以来)" min-width='110px' // 设置最大宽度:render-header="renderHeader"> // 列标题 Label 区域渲染使用的 Function</el-table-column>
方法
methods:{renderHeader(createElement, { column, _self }) { 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] || ''] ) ]) }}