el-table表格标题换行

在做一些管理后台的项目中，表格时最常见的，当有时数据字段多时往往会用滚动条，但从用户体验角度讲，肯定需要多展示信息，那么可能需要一个单元格放多个字段，这时候表头就需要换行。

具体实现如下：

// 注意，slot-scope采用了两种写法，一种正常取值，一种是解构

"tableData" v-loading="loadData" element-loading-text="正在加载中..." stripe>
   "insideNumber" label="ID" width="160" align="center" :key="Math.random()">
      
   

   "createdDate" label="性别/年龄" align="center" width="140" :key="Math.random()" :render-header="renderheader">
      
   

   "orderTypeStr" label="班级/年级" align="center" width="140" :key="Math.random()" :render-header="renderheader">
      
   

   "deliveryNumber" label="班级名次/年级名次" align="center" width="230px" :key="Math.random()" :render-header="renderheader">
      
   

主要是通过 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