element ui的 popover彈出框設置v-model屬性來決定是否顯示不出現(xiàn)彈出框但是控制臺也沒有報錯

項目中有一個需求，想直接點擊表格的行上的某一列來直接實現(xiàn)更改，我用element ui 框架的popover彈出框，然后在設置v-model="visible2"的時候，默認是false的時候點擊按鈕，popover彈出框不出現(xiàn)，如果不設置v-model這個屬性，點擊可以出現(xiàn)，不知道這是為什么？直接復制官網的代碼也一樣的問題，誰能指教一下呢？

<el-table-column label="數(shù)量" 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>

data() {
    return {
        selectForm: {
            itemcode: '',
            itemname: '',
            distnumber: '',
            quantity: 1,
        },
        rules:{
            distnumber:[
                { pattern:/^[0-9a-zA_Z]+$/ , message:'只能輸入數(shù)字和英文' ,trigger:'blur' }
            ],
            quantity:[
                { type:'number' , message:'只能輸入數(shù)字，若為空則默認為1' }
            ]
        },
        listLoading: false,
        cart_list: [],
        EditCartPre: true,
        EditCartAfter: false,
        EditBtn: true,
        confirmBtn: false,
        visible2:false
    };
},

回答

編輯回答

朕略萌

給個忠告，下次提問的時候，貼出來的代碼一定要排好版，不然看著這么亂的代碼，回答的心情都沒了。已經手動幫你重新排版了下代碼。

說正題。

Element UI里的 popover 除了可以使用 v-popover 來綁定外，還有另一種方式來實現(xiàn)，如果你稍微認真看文檔，肯定能看到下面圖中的內容。

圖中說到的 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>

2017年7月14日 00:44