element ui的 popover弹出框 设置v-model属性来决定是否显示不出现弹出框但是

Question

项目中有一个需求，想直接点击表格的行上的某一列来直接实现更改，我用element ui 框架的popover弹出框，然后在设置v-model="visible2"的时候，默认是false的时候点击按钮，popover弹出框不出现，如果不设置v-model这个属性，点击可以出现，不知道这是为什么？直接复制官网的代码也一样的问题，谁能指教一下呢？

<el-table-column label="数量" width="80" >

    <template slot-scope="scope">

        <el-popover  ref="popover4"  placement="top" width="160" trigger="click">

            <el-input v-model="scope.row.quantity"></el-input>

            <div style="margin-top:10px">

                <el-button size="mini" style="float:left" @click="cancelChange">取消</el-button>

                <el-button size="mini" type="primary" style="float:right" @click="confirmChange(scope.$index, cart_list)">确认</el-button>

            </div>

        </el-popover>

        <el-button  v-popover:popover4 type="text" style="width:40px">         

            {{scope.row.quantity}}  

        </el-button>

    </template>

</el-table-column>

Answer 1

给个忠告，下次提问的时候，贴出来的代码一定要排好版，不然看着这么乱的代码，回答的心情都没了。已经手动帮你重新排版了下代码。说正题。Element UI里的 popover 除了可以使用&nbsp;v-popover&nbsp;来绑定外，还有另一种方式来实现，如果你稍微认真看文档，肯定能看到下面图中的内容。图中说到的 slot=reference 就可以被利用起来。像你问题中的代码，就可以这样写。<template slot-scope="scope">&nbsp; &nbsp; <el-popover placement="top" width="160" trigger="click">&nbsp; &nbsp; &nbsp; &nbsp; <el-input v-model="scope.row.quantity"></el-input>&nbsp; &nbsp; &nbsp; &nbsp; <div style="margin-top:10px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-button size="mini" style="float:left"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="cancelChange">取消</el-button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-button size="mini" type="primary"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style="float:right"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="confirmChange(scope.$index, cart_list)">确认</el-button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <el-button slot="reference" type="text" style="width:40px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{scope.row.quantity}}&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </el-button>&nbsp; &nbsp; </el-popover></template>