关于element-ui popover组件通过数据渲染出多个popover时点击取消时 popover的显示与隐藏问题
2018-03-08 23:53
851 查看
使用场景: 在table组件中删除数据操作时弹出popover提示,通过数据渲染时,会渲染出多个popover。当点击删除按钮展示popover。弹出后点击取消或确定隐藏。
但是官方文档只举例了单个空间的使用方式,若多个组件该怎么使用呢?以下是官方示例:<el-popover
ref="popover5"
placement="top"
width="160"
v-model="visible2">
<p>这是一段内容这是一段内容确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
</div>
</el-popover>
<el-button v-popover:popover5>删除</el-button>在data中定义visible2为false,点击删除,popover展示;再点击取消或确定按钮的隐藏popover,并处理相应逻辑。
问题:当通过数据渲染出多个popover时就不能通过data中的变量来控制!
解决方案:当数据数据是自定义时,我们可以在每个条数据对象中添加一条属性visible: falsetableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
visible: false
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
visible: false
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
visible: false
}]
此文仅为个人在项目中实践得出的个人结论,如有不足之处还请读者指点!
但是官方文档只举例了单个空间的使用方式,若多个组件该怎么使用呢?以下是官方示例:<el-popover
ref="popover5"
placement="top"
width="160"
v-model="visible2">
<p>这是一段内容这是一段内容确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
</div>
</el-popover>
<el-button v-popover:popover5>删除</el-button>在data中定义visible2为false,点击删除,popover展示;再点击取消或确定按钮的隐藏popover,并处理相应逻辑。
问题:当通过数据渲染出多个popover时就不能通过data中的变量来控制!
解决方案:当数据数据是自定义时,我们可以在每个条数据对象中添加一条属性visible: falsetableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
visible: false
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
visible: false
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
visible: false
}]
HTML:
<el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%"> <el-table-column type="index" width="50"> </el-table-column> <el-table-column property="date" label="日期" width="120"> </el-table-column> <el-table-column property="name" label="姓名" width="120"> </el-table-column> <el-table-column property="address" label="地址"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-popover placement="top" title="确认删除吗?" width="200" trigger="click" v-model="scope.row.visible"> <div style="text-align: right; margin: 0"> <el-button size="mini" type="text" @click="scope.row.visible = false;">取消</el-button> <el-button type="primary" size="mini" @click="scope.row.visible = false;">确定</el-button> </div> <el-button type="primary" slot="reference">删除</el-button> </el-popover> </template> </el-table-column> </el-table>给操作按钮添加 slot= "reference"s属性控制popover的现实,且将v-model中的值设为tableData中的visible值。点击取消或确定也要讲对应数据中的visible设为false并处理相关逻辑。若数据为后台返回。可在使用数据时遍历一遍数据,并给每条数据添加一个标识为false即可。
此文仅为个人在项目中实践得出的个人结论,如有不足之处还请读者指点!
相关文章推荐
- jquery tree循环渲染数据,控制checkbox显示与隐藏,点击无效效果
- 关于xp+ie7下,执行confirm会出现点击取消也执行submit的问题解决方案
- asp关于田字数据显示问题
- 关于通过驱动程序读取usb接口数据的问题?
- 点击按钮从数据库中读取数据,然后通过JTable显示
- 关于asp.net2.0里的Multiview和View控件的显示与隐藏实现的问题
- 关于CListCtrl控件更新Item的闪烁问题和一次插入大容量数据的显示问题解决办法
- VS2008中关于“加载安装组件时遇到问题。取消安装”的解决
- javascript 点击固定数据 隐藏或显示DIV
- 关于更新KB956391补丁问题(会导致OWC组件不能显示)
- VS2008中关于“加载安装组件时遇到问题。取消安装”的解决
- 关于GridView的无数据显示问题..
- 关于显示数据时内容过多的问题和动态的tooltip实现
- 关于从GridView表中导出数据到Excel表中,身份证或者长度过长的数据在Excel中无法正常显示的问题
- VS2008中关于“加载安装组件时遇到问题。取消安装”的解决
- 关于各种进制的转换与数据在编辑框中显示的若干问题
- 关于数据库取数据并显示到html:select的很难描述的问题
- 关于从GridView表中导出数据到Excel表中,身份证或者长度过长的数据在Excel中无法正常显示的问题
- 关于OWC11组件访问AS数据的权限问题
- 一个关于 客户端非法取消正在进行的数据提交操作 的问题 的讨论