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官网,发下官方解释如下图: