Vue+iview在render函数中添加Poptip提示操作
前言:在项目中用到的表格插件中,在最后一栏的‘操作’中我设置了‘编辑’和‘删除’按钮,那么在选择某条数据删除的时候不仅要检查是否选中,提示是否删除还是很有必要的
1.没加Poptip之前是这样写的:
{
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Icon', {
class: 'deleteHover',
props: {
type: 'md-trash'
},
attrs: {
title: '删除'
},
on: {
click: () => {
this.remove(params.row)
}
}
}, '删除')
]);
}
}
2.加Poptip后这样写:
{
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Poptip', {
props: {
placement: 'left-start',
confirm: true,
transfer: true,
title: '确定删除吗?',
},
on: {
'on-ok': () => {
this.remove(params)
},
'on-cancel': () => {
}
}
}, [
h('Icon', {
class: 'deleteHover',
props: {
type: 'md-trash'
},
attrs: {
title: '删除'
},
style: {
cursor: 'pointer'
},
on: {
click: () => {
}
}
}, '删除')
])
]);
}
}