Vue ElementUI在el-table中使用el-popover问题
作者:小聪聪 时间:2024-05-09 15:22:15
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-${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();
}
el-popover在el-table中会出现不显示情况
Popover 的属性与 Tooltip 很类似 都是弹出提示,一般情况下,如果是固定提示内容的话,采取Tooltip 简单了事。
接触到一个需求,el-table其中一列,根据后端返回的数据不同展示不同的 btn,其中一个btn 需要鼠标hover 的时候 获取该行元素的 id(需要在hover的时候 通过调接口获取),此时使用Tooltip就无法达到动态显示提示内容的效果了。
Popover 在基于Tooltip 有@show事件,当提示内容hover的时候,可以触发@show回调,此时可以去请求后端接口获取需要的数据。
问题: 在el-table-column 内 使用el-popover 有时候会出现hover 不显示提示框的情况
总所周知,el-table-column 代表的是 列,在其中写 一个el-popover ,其相当于 写了N个,(N取决于el-table 中 data 的 数组长度) table 常常 与 分页 一起使用
以下属于个人猜测,为了解释给自己听的
由于el-table data数据长度,遍历出多个 el-popover 而 el-popover 是根据条件row.staus === 1 判断是否出现的 (其中el-popover 的一些熟悉 就不写了)
<el-table-column >
?<template #default="{row}">
? <el-popover ....>
? ? <span>需要显示的文本内容</span>
? ? <div slot="reference" v-if="row.status === 1">查看内容</div>
? </el-popover>
? <div v-if="row.status === 2">暂无内容</div>
?</template>
</el-table-column>
此时可能会出现一种情况,第一页table 有10条数据, 其中第一条 和 第5条的row.status === 1
第二页 只有2条数据,第一条row.status === 2 第二条 row.status === 2
bug 复现: 当我第一次进入页面, hover 第一页的第一条数据 能够正常显示 <span>内容,也能正常显示第五条<span>内容,
当我切换到第二页,由于第二页只有两条数据,而且status === 2 所以 hover 是不会显示数据的, 这个时候 我再切换到第一页,再次hover 到第一条数据发现,此时row.status === 1 的那条数据不再显示<span>内容了 然而 第一页的 第五条数据 row.status ===1 hover 还是能正常显示<span>内容
经过上述操作,(个人觉得,没有官方判断)第一页的第一条本应该hover 展示<span>内容的 却没有展示 是因为 可能复用了 第二页第一条row.status === 2 的el-popover
为了防止 el-popover 复用,采取两个方法 :
1. 给el-popover不同的ref
2. 将v-if 判断同步移到 el-popover里
<el-table-column >
?<template #default="{row}">
? <el-popover v-if="row.status === 1" :ref="`node-${row.id}`">
? ? <span>需要显示的文本内容</span>
? ? <div slot="reference" v-if="row.status === 1">查看内容</div>
? </el-popover>
? <div v-if="row.status === 2">暂无内容</div>
?</template>
</el-table-column>
当 row.status !==1 时 el-popover 自然而然就被销毁了,也就不存在复用的情况,若出现第一页 和 第二页 都是row.status === 1 的情况,此时 由于ref 不同也不会复用 (下划线内容 为个人判断)
经过上述操作,大致能解决 el-popover 不显示的问题 (由于个人对该组建理解不是很深刻,所以不敢打包票 百分百解决)
额外内容:
通过查看el-popover 的源码 发现 存在一些 element 组件options没有 给出的一些方法,可以配合 ref 一起使用,能实现一些特殊功能的处理 。 通过 this.$refs['el-popover的ref'].方法()
通过查看源码可以发现,el-popover 中的methods 有以下几个方法:
doShow()
: 展示el-popoverdoClose()
: 关闭el-popoverdoToToggle()
: 取反 关闭则展示,展示则关闭
tips:
当el-popover 内 不写 slot=“reference” 其中内容是不会展示(div内容)的 例如:
<el-popover>
?<div>没有使用slot插槽</div>
</el-popover>
来源:https://blog.csdn.net/weixin_44745330/article/details/106055977
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
SQL Server 更改DB的Collation
Python实现的石头剪子布代码分享
Pycharm在指定目录下生成文件和删除文件的实现
Python Django框架实现应用添加logging日志操作示例
asp读取xml实例代码
python基于物品协同过滤算法实现代码
显示日期格式的几个函数
MySQL基本操作语句小结
python遍历文件目录、批量处理同类文件
![](https://img.aspxhome.com/file/2023/7/79777_0s.png)
asp如何向客户端发送提示“出错信息”?
基于Python os模块常用命令介绍
![](https://img.aspxhome.com/file/2023/2/121912_0s.png)
php实现的三个常用加密解密功能函数示例
![](https://img.aspxhome.com/file/2023/4/55424_0s.jpg)
C#调用Python脚本的简单示例
![](https://img.aspxhome.com/file/2023/1/71751_0s.jpg)
pytorch tensor内所有元素相乘实例
Golang实现断点续传功能
![](https://img.aspxhome.com/file/2023/8/99058_0s.jpg)
关于Python 常用获取元素 Driver 总结
python日记(使用TCP实现的对话客户端和服务器)
MySQL 查询 并集、交集、差集方式
![](https://img.aspxhome.com/file/2023/8/128388_0s.png)
一行Python代码制作动态二维码的实现
![](https://img.aspxhome.com/file/2023/7/78847_0s.jpg)