ElementUI 自定义表头 el-table
昨晚睡不着的时候,突然想到了前段时间做的一个需求,但是只记得大概了,所以早起复习一下
在ElementUI 中,都知道 el-table 定义表格,但是很多时候,官方的并满足不了需求,这时候就需要用到官方提供的自定义表头
首先,我们需要在 el-table-column 里面添加 render-header 属性
<el-table-column
v-for="(item, index) in columnList"
:key="index"
:prop="item.prop"
:width="item.width"
:label="item.label"
align="center"
:render-header="renderHeader"
show-overflow-tooltip
sortable
>
render-header
列标题 Label 区域渲染使用的 Function
类型及返回值 Function(h, { column, $index })
h 相当于vue 的createElement函数,参数也一样
h(tagName, props, children)
// children 是数组,里面可以是文字,也可以是一个新的函数
h('div', {id: 'h-id'}, [
h('div', {}, ['1月']),
h('span', {}, ['卓越值']),
h('span', {}, ['标准值']),
h('span', {}, ['警戒值'])
])
column是当前表头的一些属性
$index就是单纯的从0开始的数字,0代表第一列,可以通过这个属性来判断当前是第几列