element-ui中鼠标hover出现文字提示

最新推荐文章于 2024-09-01 13:57:04 发布

钥沅

最新推荐文章于 2024-09-01 13:57:04 发布

阅读量4k

点赞数

分类专栏： vue 文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_57696123/article/details/125329196

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何利用Element-UI的Popover组件在表格中展示审核状态。当用户将鼠标悬停在表格的‘审核状态’列上时，Popover会以top方向弹出，展示详细的审核不通过原因。代码示例中展示了根据`auditStatus`字段动态显示'未审核'、'已审核'和审核未通过的原因。Element-UI是一个流行的Vue.js UI框架，提供丰富的组件库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

他的实现用的是element-ui 中的popover组件

实现代码：

<el-table-column prop="auditStatus" label="审核状态" width="150">
						<template slot-scope="scope">
							<span v-if="scope.row.auditStatus=='0'">未审核</span>
							<span v-if="scope.row.auditStatus=='1'">已审核</span>
							<el-popover trigger="hover" placement="top">
								<p v-if="scope.row.auditStatus=='2'">审核不通过原因：{{scope.row.auditComment}}</p>
								<div slot="reference" class="name-wrapper">
									<span v-if="scope.row.auditStatus=='2'">审核未通过</span>
								</div>
							</el-popover>
						</template>
</el-table-column>

把需要hover显示的文字放在 <div slot='reference'>中

placement是弹窗出现的位置

trigger是弹窗出现的触发条件

详见官网Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/popover