element ui的 popover弹出框 设置v-model属性来决定是否显示不出现弹出框但是控制台也没有报错
项目中有一个需求,想直接点击表格的行上的某一列来直接实现更改,我用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技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
给个忠告,下次提问的时候,贴出来的代码一定要排好版,不然看着这么乱的代码,回答的心情都没了。已经手动帮你重新排版了下代码。
说正题。
Element UI里的 popover 除了可以使用
v-popover
来绑定外,还有另一种方式来实现,如果你稍微认真看文档,肯定能看到下面图中的内容。图中说到的
slot=reference
就可以被利用起来。像你问题中的代码,就可以这样写。