【Vue】iview 在Table组件中使用Poptip组件

• Z时代
• 2024-01-10
• 分类：技术分享

以上是element的组件效果，
准备使用iview却不知道如何实现这个效果

以下代码能弹出但是Poptip组件按钮没效果，求助

    columns: [{
title: '产品图',
key: 'pic',
sortable: true,
render: function(h, para){
return h('div', [
h('Button', [
h('Poptip', {
props: {
confirm: true,
title: '确定要删除吗！',
type: 'error',
size: 'small'
},
on: {
ok: function(){
alert('删除按钮，没效果')
},
cancel: function(){
alert('取消按钮，没效果')
}
}
}, '删除')
])
]);
}
}]

回答

后面再试了一下
方法上面加个'on-ok'就可以执行了

    columns: [{title: '产品图',
    key: 'pic',
    sortable: true,
    render: function(h, para){
        return h('div', [
            h('Button', [
                h('Poptip', {
                    props: {
                        confirm: true,
                        title: '确定要删除吗！',
                        type: 'error',
                        size: 'small'
                    },
                    on: {
                        'on-ok': function(){
                            alert('删除按钮，有效果')
                        },
                        'on-cancel': function(){
                            alert('取消按钮，有效果')
                        }
                    }
                }, '删除')
            ])
        ]);
    }
}]

    columns: [{title: '产品图',
    key: 'pic',
    sortable: true,
    render: function(h, para){
        return h('div', [
            h('Button', [
                h('Poptip', {
                    props: {
                        confirm: true,
                        title: '确定要删除吗！',
                        type: 'error',
                        size: 'small'
                    },
                    on: {
                        'on-ok': function(){
                            this.$Message.info('点击了确定')
                        },
                        'on-cancel': function(){
                            this.$Message.info('点击了确定')
                        }
                    }
                }, '删除')
            ])
        ]);
    }
}]

请问在'on-ok': function(){使用this.$Message.info('点击了确定')报错Error in event handler for "on-ok": "TypeError: Cannot read property '$Message' of null",怎么解决呀？？在线等，急，谢谢

使用=>操作符，修改后代码如下：

 columns: [{title: '产品图',
    key: 'pic',
    sortable: true,
    render: function(h, para){
        return h('div', [
            h('Button', [
                h('Poptip', {
                    props: {
                        confirm: true,
                        title: '确定要删除吗！',
                        type: 'error',
                        size: 'small'
                    },
                    on: {
                        'on-ok': ()=>{
                            this.$Message.info('点击了确定')
                        },
                        'on-cancel': ()=>{
                            this.$Message.info('点击了确定')
                        }
                    }
                }, '删除')
            ])
        ]);
    }

以上是 【Vue】iview 在Table组件中使用Poptip组件 的全部内容， 来源链接： utcz.com/a/85662.html