[element-ui] el-table表头换行

最新推荐文章于 2024-03-08 11:45:55 发布

533_

最新推荐文章于 2024-03-08 11:45:55 发布

阅读量331

点赞数

分类专栏： element-ui 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_14993591/article/details/127511893

版权

element-ui 专栏收录该内容

106 篇文章 2 订阅

订阅专栏

<template v-for="(column, index) in columns">
	<el-table-column
     :key="index"
     :label="column.label"
     :prop="column.prop"
     :width="column.width ? column.width : 'auto'"
     :render-header="renderheader"
   	>
     <template slot-scope="scope">
       {{ scope.row[column.prop] }}
       <span class="unit">{{ column.danwei }}</span>
     </template>
   </el-table-column>
 </template>

加上 :render-header="renderheader"

methods

renderheader(h, { column, $index }) {
      return h("div", {}, [
        h("div", {}, column.label.split(",")[0]),
        h("div", {}, column.label.split(",")[1]),
      ]);
    },

	// 列表字段对应
 columns: [
   {
     label: '姓名',
     prop: 'name',
   },
   {
     label: '年龄',
     prop: 'age',
   },
   {
     label: '地址,(具体到区)',
     prop: 'adress',
   },
 ]