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])
     ])
  },
}

最终效果图如下

 

 

 

 

转载于:https://www.cnblogs.com/hcxy/p/9359022.html