介绍
最近用到 element 的表格的 render-header 属性，官方似乎没具体说明怎么使用，然后自己找资料实现了满足需求的解决方案。
需求1: 在表头放一个带点击事件的按钮
需求2: 点击按钮时需要传输自定义参数（用来区分点击的是哪一列）
主要以 render-header 进行扩展使用。
主要代码
html：
<el-table-column label="城市" align="center" :render-header="(h, obj) => renderHeader(h, obj, '城市')">
<template slot-scope="scope">
{{ scope.row.city }}
</template>
</el-table-column>
<el-table-column label="运费" align="center" :render-header="(h, obj) => renderHeader(h, obj, '运费')">
<template slot-scope="scope">
{{ scope.row.price }}
</template>
</el-table-column>
注意：这里的 render-header 属性看情况使用（是否需要传输自定义参数）
// 如果需要 传输自定义参数
:render-header="(h, obj) => renderHeader(h, obj, '你的参数')"
// 如果不需要 传输自定义参数
:render-header="renderHeader"
js:
methods: {
// 自定义表头
renderHeader(h, { column, $index }, type){
let that = this;
return h(
'div',[
// 列名称
h('span', column.label),
// 按钮
h('el-button', {
props: {
type: 'text',
size: 'small',
},
style: 'margin-left: 5px;',
on: {
click: function() {
that.clickButton(type);
}
}
}, '按钮名称')
],
)
},
// 按钮点击事件
clickButton(type) {
console.log('我点击了' + type + '的列');
}
}