elementuitablerender-header⾃定义表头信息使⽤
在使⽤vue⾃定义组件内容过程之中，我们绝⼤多数情况下都是通过预先写好不同的html模板，再通过props传⼊不同的值来渲染不同的模板。例如我们需要实现⼀个<v-title size='1'>组件。传⼊不同的size，标题显⽰不同的字号⼤⼩，我们可能这样去实现这个组件：
<template>
<h1 v-if='size==1'><slot></slot></h1>
<h2 v-if='size==2'><slot></slot></h1>
<h3 v-if='size==3'><slot></slot></h1>
column函数的使用</template>
这样做法显得代码过多，⽽且有时候我们需要真的JavaScript完全编程能⼒，即通过js代码⽣成html结构，再插⼊到页⾯之中。实现这样要求我们需要了解render函数。⾸先我们先了解三点
1. render⽅法的实质就是⽣成template模板；
2. 通过调⽤⼀个⽅法来⽣成，⽽这个⽅法是通过render⽅法的参数传递给它的；
3. 这个⽅法有三个参数，分别提供标签名，标签相关属性，标签内部的html内容
下⾯通过⼀个element ui⾃定义表格表头内容的功能来展⽰render函数使⽤。
页⾯代码部分：
<el-table-column  prop='timeSlice' :render-header="renderHeader">
<template slot-scope="scope">
{{w.timeSlice}}
</template>
</el-table-column>
js部分：使⽤render函数
//⾃定义列标题内容
renderHeader(h, { column, $index },index){
return h('span', {}, [
h('span', {}, '时间⽚段'),
h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover', content: '领先/落后品类=单店平均单量-该品类城市店均单量' }}, [
h('i', { slot: 'reference', class:'el-icon-question'}, '')
])
])
},
实现效果：
可以看到第⼀个函数参数即 标签名，第⼆个为属性名组成的对象，第三个参数代表值，如果值依然包含html标签，我们可以使⽤数组来定义。以上就是本⽂全部内容。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。