el-table表格標題換行

在做一些管理后台的項目中，表格時最常見的，當有時數據字段多時往往會用滾動條，但從用戶體驗角度講，肯定需要多展示信息，那么可能需要一個單元格放多個字段，這時候表頭就需要換行。

具體實現如下：

// 注意，slot-scope采用了兩種寫法，一種正常取值，一種是解構

<el-table border :data="tableData" v-loading="loadData" element-loading-text="正在加載中..." stripe>
   <el-table-column prop="insideNumber" label="ID" width="160" align="center" :key="Math.random()">
      <template slot-scope="scope">
         <span @click="openDetailTab(scope.row.id)" style="color: green; cursor: pointer">{{scope.row.id}}</span>
      </template>
   </el-table-column>

   <el-table-column prop="createdDate" label="性別/年齡" align="center" width="140" :key="Math.random()" :render-header="renderheader">
      <template slot-scope="{ row }">  // 解構
         <div>{{ row.sex }}</div>
         <div>{{ row.age }}</div>
      </template>
   </el-table-column>

   <el-table-column prop="orderTypeStr" label="班級/年級" align="center" width="140" :key="Math.random()" :render-header="renderheader">
      <template slot-scope="scope">    // 正常取值
         <div>{{ scope.row.class }}</div>
         <div>{{ scope.row.grade }}</div>
      </template>
   </el-table-column>

   <el-table-column prop="deliveryNumber" label="班級名次/年級名次" align="center" width="230px" :key="Math.random()" :render-header="renderheader">
      <template slot-scope="{ row }">
         <div>{{ row.classOrder }}</div>
         <div>{{ row.gradeOrder }}</div>
      </template>
   </el-table-column>
</el-table>

主要是通過 el-table-column 預留的內置方法 render-header 

 

methods: {
  renderheader(h, { column, $index }) {
     return h('span', {}, [
        h('span', {}, column.label.split('/')[0]),
        h('br'),
        h('span', {}, column.label.split('/')[1])
     ])
  },
}

最終效果圖如下