iview表格设置表头： 使用 renderHeader在表头渲染按钮

1.表头显示的是一个按钮，可以使用 renderHeader 渲染：

{
	renderHeader: (h, params) => {
	    return h('span', [
	        h('Button', {
	            props: {
	                type: 'success',
	                size: 'small'
	            }
	        }, '按钮1'),
	        h('Button', {
	            props: {
	                type: 'error',
	                size: 'small'
	            }
	        }, '按钮2')
	    ]);
	},
	key: 'name'
}

2. renderHeader渲染的是某个外部组件

1. 原外部组件的正常使用

<columns-config
     :isActive='isColumnConfigActive'
     :columnsState='configuredColumnsState'
     @change-columns='changeColumnsShow'
     @reset-columns='resetColumnsShow'
 />

2.在renderHeader中渲染外部组件

{
	renderHeader: (h) => {
	     return h(ColumnsConfig, {
	     	 // 传参
	         props: {
	             isActive: this.isColumnConfigActive,
	             columnsState: this.configuredColumnsState,
	         },
	         // 调用函数
	         on: {
	             'change-columns': this.changeColumnsShow,
	             'reset-columns': this.resetColumnsShow,
	         },
	     })
	 },
	 key: 'name',
	 width: 50,
	 fixed: 'right',
},

具体代码：

<template>
    <Table :columns="columns1" :data="data1"></Table>
</template>
<script>
    export default {
        data() {
            return {

                arr1: ['name', '姓名'],
                arr2: ["age", "年龄"],
                arr3: ["address", "地址"],

                columns1: [
                    {
                        renderHeader: (h, params) => {
                            return h('span', [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    }
                                }, this.arr1[0]),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, this.arr1[1])
                            ]);
                        },
                        key: 'name'
                    },
                    {
                        renderHeader: (h, params) => {
                            return h('span', [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    }
                                }, this.arr2[0]),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, this.arr2[1])
                            ]);
                        },
                        key: 'age'
                    },
                    {
                        renderHeader: (h, params) => {
                            return h('span', [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    }
                                }, this.arr3[0]),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, this.arr3[1])
                            ]);
                        },
                        key: 'address'
                    }
                ],
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
            }
        }
    }
</script>

样式如下：