vue中的render函数应用过程:
API
基于Iview
Button组件

render: (h, params) => {

    return h('div', [
        h('Button', {
            props: {
                type: 'success',
                size: 'small'
            },
            style: {
                marginRight: '5px'
            },
            on: {
                click: () => {
                    this.edit(params.index)
                }
            }
        }, '修改'),
        h('Button', {
            props: {
                type: 'error',
                size: 'small'
            },
            style: {
                marginRight: '5px'
            },
            on: {
                click: () => {
                    this.del(params.index)
                }
            }
        }, '删除')
    ]);

}, render: (h, params) => {

    return h('div', [
        h('Button', {
            props: {
                type: 'success',
                size: 'small'
            },
            style: {
                marginRight: '5px'
            },
            on: {
                click: () => {
                    this.edit(params.index)
                }
            }
        }, '修改'),
        h('Button', {
            props: {
                type: 'error',
                size: 'small'
            },
            style: {
                marginRight: '5px'
            },
            on: {
                click: () => {
                    this.del(params.index)
                }
            }
        }, '删除')
    ]);

},

Switch组件

render: (h, params) => {

    return h('i-switch', {
        props: {
            size: 'large',
            value: params.row.show === 1
        },
        scopedSlots: {
            open: () => h('span', '开启'),
            close: () => h('span', '关闭')
        },
        on: {
            'on-change': (value) => {
                console.log(params.index, value)
            }
        }
    });
},

关于IviewUI框架为什么render函数按钮可以用Button,而开关却是i-switch,我探索了一下Iveiw官网,发下官方解释如下图:
image.png


请鹅出战
328 声望3 粉丝

当我带上墨镜,也许我就真的瞎了。