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