ElementUI 自定义表头 el-table

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代表第一列，可以通过这个属性来判断当前是第几列