介绍

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