Vue+iview在render函数中添加Poptip提示操作
2022-03-02
前言:在项目中用到的表格插件中,在最后一栏的‘操作’中我设置了‘编辑’和‘删除’按钮,那么在选择某条数据删除的时候不仅要检查是否选中,提示是否删除还是很有必要的
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: () => { } } }, '删除') ]) ]); } }