element-ui 設置table 表頭多列顯示

效果圖

 

 html部分

<el-table-column prop='userId' :render-header="General" label="獎品數量|(區別於獎品總數量)" show-overflow-tooltip align="center"></el-table-column> //用到 render-header

js部分

General(h,{column}){
        return h('span', {}, [
            h('span', {}, column.label.split('|')[0]), //設置一個|用於切割，以這個點換行
            h('br'),
            h('span', {style: "color:#C1C1C1;"}, column.label.split('|')[1])
        ])
      },