el-popover 手动关闭

抽象沙漏
• 阅读 7253

我们知道element 提供的popover 是自动关闭的, 那么想手动控制关闭怎么做呢
可以利用$refs['ref_']提供的doClose() 方法
比如在表格中, td 项点击弹出popover

<el-table-column prop="" label="出价" align="center">
          <template slot-scope="scope">
         
            <span>{{ parseFloat(scope.row.price).toFixed(2) }} 
              <el-popover
              :ref="'ref_'+scope.row.id"
              placement="right-start"
              width="200"
              trigger="click"
              >
              <div>
                <p> 
                  <input 
                  :id="'price_'+scope.row.id" 
                  :value="parseFloat(scope.row.price).toFixed(2)" 
                  style="width: 100px; height:30px;"/>
                  <el-button type="text" size="mini" @click="setPrice(scope)">确定</el-button>
                  <el-button type="text" size="mini" @click="cancelPrice(scope)">取消</el-button>
                </p>
                
              </div>
              <i slot="reference" class="el-icon-edit cursor-pointer" v-if="editpriceFlg"></i>
            </el-popover>
              
            </span>

          </template>
        </el-table-column>

js 部分 scope._self.$refs['ref_'+id].doClose() 关闭

 cancelPrice(scope){
      let id = scope.row.id
      scope._self.$refs['ref_'+id].doClose()
    },
    setPrice(scope){
      let id = scope.row.id

      let val = $("#price_"+id).val()
      if(!this.validPrice(val)){
        $("#price_"+id).val(scope.row.price)
        return
      }
      this.listLoading = true
      request.post('/price',{id: id, price: val}).then((resData)=>{
        this.$message.info("修改成功")

      }).finally((_)=>{
        this.listLoading = false
        this.select()
        scope._self.$refs['ref_'+id].doClose()
      })
    },
    
点赞
收藏
评论区
推荐文章
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
LinMeng LinMeng
5年前
element-ui Dialog组件的close-on-click-modal属性
element组件库的Dialog对话框默认可以通过点击modal关闭Dialog,即点击空白处弹框可关闭。单功能设置如下:<eldialog:closeonclickmodal"false"</eldialog全局修改默认配置,点击空白处不能关闭弹窗://在组件注册.js文件中Dialog.props.cl
九路 九路
5年前
IntentService使用以及源码分析
一概述我们知道,在Android开发中,遇到耗时的任务操作时,都是放到子线程去做,或者放到Service中去做,在Service中开一个子线程来执行耗时操作。那么,在Service里面我们需要自己管理Service的生命周期,何时开启何时关闭,还是很麻烦的,还好Android给我们提供了一个这样的类,叫做IntentService那么Intent
Stella981 Stella981
4年前
Centos 7.0 zabbix 部署
1、LAMP环境搭建初次安装可以先关闭selinux和firewallroot@localhost~setenforce0root@localhost~systemctlstopfirewalld.service1.1 mariadb数据库安装,启动、加入启动项root@localh
Stella981 Stella981
4年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Stella981 Stella981
4年前
PHP 对 mysql 的事务处理
mysqlmysql事务处理php代码实现事务的处理可以通过PHP预定义类mysqli的以下方法实现。autocommit(boolean):该方法用于限定查询结果是否自动提交,如果该方法的参数为true则自动提交,如果参数为false则关闭自动提交。MySQL数据库默认为自动提交。rollback():利用mysqli类中的该
Wesley13 Wesley13
4年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
4年前
QTableWidget界面有数据之后鼠标点击无响应界面无响应
1.问题:QTableWidget上出现数据之后,界面无响应,鼠标点击没有响应,但是还是可以正常接收数据,连关闭按钮都无法关闭,必须通过杀死进程来关闭程序。有的电脑是无响应,有的电脑又可以。2.分析:界面无响应的原因:(1)程序崩溃卡死,点击会无响应,但是数据还在正常接收,说明不是,排除(2)界面上出现了模态对话框,只有关闭了模态
Stella981 Stella981
4年前
Linux中使用vsftpd搭建指定用户指定目录的ftp服务器的方法
一。检查Linux中vsftpd的安装情况。二。将系统中的SELinux关闭,然后重新启动电脑关闭SELinux的方法:修改/etc/selinux/config文件中的SELINUX""为disabled,然后重启。如果不想重启系统,使用命令setenforce0注:setenforce1设置SELinux成为
Stella981 Stella981
4年前
Linux 命令全集
一、开关机sync:把内存中的数据写到磁盘中(关机、重启前都需先执行sync)shutdownrnow或reboot:立刻重启shutdownhnow:立刻关机shutdownh19:00:预定时间关闭系统(晚上7点关机,如果现在超过8点则第二天)shutdownh10:预定时间关闭系统(10分钟后关机)