关于vue.js:elpopover-手动关闭

咱们晓得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()
      })
    },
    

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理