html代码部分
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button @click="checkUserInfoFn(scope.row.id)" type="text" size="small">查看</el-button>
<el-button @click="editUserInfoFn(scope.row.id)" type="text" size="small">编辑</el-button>
<el-button type="text" size="small" @click="scope.row.visible = true">删除</el-button>
<el-popover
placement="left"
width=170
v-model="scope.row.visible">
<p>是否删除此用户信息?</p>
<div style="text-align: right; margin-top: 10px;">
<el-button size="mini" type="text" @click="scope.row.visible = false">否</el-button>
<el-button size="mini" type="primary" @click="scope.row.visible = false">是</el-button>
</div>
</el-popover>
</template>
</el-table-column>
js部分,最主要的是在表格数据中添加 visible: false 属性,用于控制每列的popover的显示/隐藏
response.data.data.forEach(function(item){
item.visible = false;
})
此番操作即可解决问题,但是我用的时候有个小问题,我的popover不显示指示箭头,就算我添加属性,它也不显示,而且设置显示的位置也无效,有待解决。难道在表格里不能这样处理吗?Orz