ElementUi自定义的header

表头显示俩行文字(单个)(见图片)

在这里插入图片描述

	// template
    <el-table-column prop="test" :render-header="renderHeader"></el-table-column>
  
    // methods
    renderHeader(h) {
      return [
        h("p", {}, ["标题"]),
        h(
          "p",
          {
            style: "font-size:10px"
          },
          ["这是单位"]
        )
      ];
    },

表头显示俩行文字(多个)(见图片)

可以一个methods完成,也可以写多个methods

在这里插入图片描述

		// template
      	<el-table-column prop="test1" label="标题1这是单位1" :render-header="renderHeader"></el-table-column>
        <el-table-column prop="test2" label="标题2这是单位2" :render-header="renderHeader"></el-table-column>
        <el-table-column prop="test3" label="标题3这是单位3"  :render-header="renderHeader"></el-table-column>
		
		// 定义一个全局变量
		var renderHeaderList = [
		  {
		    title: "标题1",
		    key: "test1",
		    unit: "这是单位1"
		  },
		  {
		    title: "标题2",
		    key: "test2",
		    unit: "这是单位2"
		  },
		  {
		    title: "标题3",
		    key: "test3",
		    unit: "这是单位3"
		  }
		];
		// methods
		// column.property 是props的key值
		renderHeader(h, { column, $index }) {
	      let obj = renderHeaderList.find(item => item.key == column.property);
	      return [
	        h("p", {}, [`${obj.title}`]),
	        h("p", { style: "font-size:10px" }, [`${obj.unit}`])
	      ];
	    },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值