element-ui的表頭label如何添加換行的樣式,自定義表頭格式。render-header

 

 <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
 </el-table>

 

you有時候我們希望label中的內容換行，比如。

這個時候我們在label無法達到換行的目的。我們就可以考慮使用下面的這個render-header

 

 使用方法是

 <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" :render-header="renderHeader" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
 </el-table>

    //渲染表頭，換行
            renderHeader (h,para) {
                   return h('div',{
                        attrs:{
                          class:'cell',
                        },
                        domProps:{
                          innerHTML:'班級人數</br>(現有學生數/總學生數)'
                        }
                      })
            },