Vue ElementUI在el-table中使用el-popover
Vue ElementUI在el-table中使用el-popover,点击嵌套内容中的确定或取消来关闭el-popover。<el-table-column width="100" align="center" label="操作"><template slot-scope="scope"><el-popover width="160" :ref="`popover
·
Vue ElementUI在el-table中使用el-popover,点击嵌套内容中的确定或取消来关闭el-popover。
<el-table-column width="100" align="center" label="操作">
<template slot-scope="scope">
<el-popover width="160" :ref="`popover-${scope.$index}`">
<p>确定删除该项吗?</p>
<div style="text-align: right; margin: 0">
<el-button type="text" size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">
取消
</el-button>
<el-button type="danger" size="mini" >确定</el-button>
</div>
<el-button type="text" slot="reference">删除</el-button>
</el-popover>
</template>
</el-table-column>
方法二
<el-table-column width="100" align="center" label="操作">
<template slot-scope="scope">
<el-popover width="160" :ref="`popover-${scope.$index}`">
<p>确定删除该项吗?</p>
<div style="text-align: right; margin: 0">
<el-button type="text" size="mini" @click="handleClose(scope.$index)">
取消
</el-button>
<el-button type="danger" size="mini" >确定</el-button>
</div>
<el-button type="text" slot="reference">删除</el-button>
</el-popover>
</template>
</el-table-column>
<script>
...
handleClose(index) {
this.$refs[`popover-${index}`].doClose()
}
...
</script>
方法三
<div ref="closepopover">
<el-table-column label="操作">
<template slot-scope="item">
<el-popover
placement="right"
title="确定删除?"
width="200"
v-model="item.row.visible"
trigger="click">
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="updateVisible()">取消</el-button>
<el-button type="primary" size="mini" @click="updateVisible()">确定</el-button>
</div>
<el-button slot="reference">删除</el-button>
</el-popover>
</template >
</el-table-column>
//也可解决
updateVisible(){
this.$refs.closepopover.click();
}
更多推荐
已为社区贡献1条内容
所有评论(0)