码迷,mamicode.com
首页 > 其他好文 > 详细

Element-ui的气泡框如何在@onConfirm方法中调用元素上特定的值

时间:2020-04-04 17:27:57      阅读:751      评论:0      收藏:0      [点我收藏+]

标签:add   如何   标签   png   利用   slot   现在   效果   inf   

缘由:想做一个删除按钮有提示,然后纠结了半天还是用了Element-ui的气泡框。首先修改了<el-button>的padding来修改按钮大小。

效果:技术图片

然后问题是要通过删除后的气泡框的确认事件来删除某个收藏夹,但是如何动态获取这个数据呢?
我人傻,还是像用ev.currentTarget.dataset.xx的方法,过了1个多小时才发觉这个方法是放在element-ui的标签上的,它是被封装过的,一加载所有元素都变化了。

然后又过了半小时,我想到可以利用<el-button>的方法来传值,结果发现在气泡框方法中调用按钮的方法其实是调用了两次的,好吧,再把值先放在vue的data里面,然后通过按钮赋值,再在气泡框的确认方法中将数据取来用。

 

结果:

<el-popconfirm @onConfirm="deleteCollection"
                title="删除后不可恢复,确认删除?"
              >
                <el-button class="collection_delete" slot="reference" type="danger"
                           @click="getCollectGroupId(collection.collectGroupId)">删除</el-button>
              </el-popconfirm>
// 删除收藏夹列表
    deleteCollection(e) {
      alert(this.collectGroupId)
    },
    // 获取要删除的收藏夹id赋值geicollectGroupId,方便后续的调用
    getCollectGroupId(e) {
  //vue的data下创建一个collectGroupId
this.collectGroupId = e; },

 

Element-ui的气泡框如何在@onConfirm方法中调用元素上特定的值

标签:add   如何   标签   png   利用   slot   现在   效果   inf   

原文地址:https://www.cnblogs.com/woyujiezhen/p/12632678.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!