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官网,发下官方解释如下图:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。