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 除了可以使用 v-popover 来绑定外，还有另一种方式来实现，如果你稍微认真看文档，肯定能看到下面图中的内容。

图中说到的 slot=reference 就可以被利用起来。像你问题中的代码，就可以这样写。

<template slot-scope="scope">

    <el-popover 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-button slot="reference" type="text" style="width:40px">         

            {{scope.row.quantity}}  

        </el-button>

    </el-popover>

</template>