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官网，发下官方解释如下图：
12291708-5efab080707c2_articlex.png
