您的位置:首页 > 产品设计 > UI/UE

关于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
}]
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即可。
此文仅为个人在项目中实践得出的个人结论,如有不足之处还请读者指点!

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐