element-ui中鼠标hover出现文字提示
效果 他的实现用的是element-ui 中的popover组件 实现代码:把需要hover显示的文字放在 中是弹窗出现的位置是弹窗出现的触发条件详见官网Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/z
·
效果
他的实现用的是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
是弹窗出现的触发条件
更多推荐
已为社区贡献2条内容
所有评论(0)