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

使用 renderHeader 渲染表头的显示内容:

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])
    ]);
},

具体代码:

<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>


样式如下:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/wytraining/article/details/103701477