element ui的 popover弹出框 设置v-model属性来决定是否显示不出现弹出框但是控制台也没有报错

发布于 2022-09-06 05:32:18 字数 1633 浏览 14 评论 0

项目中有一个需求,想直接点击表格的行上的某一列来直接实现更改,我用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>
data() {
    return {
        selectForm: {
            itemcode: '',
            itemname: '',
            distnumber: '',
            quantity: 1,
        },
        rules:{
            distnumber:[
                { pattern:/^[0-9a-zA_Z]+$/ , message:'只能输入数字和英文' ,trigger:'blur' }
            ],
            quantity:[
                { type:'number' , message:'只能输入数字,若为空则默认为1' }
            ]
        },
        listLoading: false,
        cart_list: [],
        EditCartPre: true,
        EditCartAfter: false,
        EditBtn: true,
        confirmBtn: false,
        visible2:false
    };
},

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

孤独患者 2022-09-13 05:32:18

给个忠告,下次提问的时候,贴出来的代码一定要排好版,不然看着这么乱的代码,回答的心情都没了。已经手动帮你重新排版了下代码。


说正题。

Element UI里的 popover 除了可以使用 v-popover 来绑定外,还有另一种方式来实现,如果你稍微认真看文档,肯定能看到下面图中的内容。

clipboard.png

图中说到的 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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文