zoukankan      html  css  js  c++  java
  • Element-ui的气泡框如何在@onConfirm方法中调用元素上特定的值

    缘由:想做一个删除按钮有提示,然后纠结了半天还是用了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; },

    说起来挺尴尬的,这段代码写完之后,隔了一天,我突然想起来为什么要隔一个方法传值过去,直接在deleteCollection方法里面传值过去不久行了?我还非得多做一步?我昨天又煞笔了。泪流满面,人傻没救了。放这了,我也不删这篇博客了,有点点想哭。

  • 相关阅读:
    java集合Collection常用方法详解
    JavaWeb_cookie和session
    JavaWeb_Cookie
    Java中双向链表
    Java链表基础
    select函数详解及实例分析
    socket select函数的详细讲解
    记录远程用户登录日志
    MSSQL grant
    dll 中使用ADO
  • 原文地址:https://www.cnblogs.com/woyujiezhen/p/12632678.html
Copyright © 2011-2022 走看看