Element中table表格自定义表头添加有点击事件的按钮，并传输自定义参数

介绍

　　最近用到 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 + '的列');
　　　　　　}
　　　　}