解决ElementUI中tooltip出现无法显示的问题
更新时间:2023年03月11日 12:07:27 作者:小火车况且况且
这篇文章主要介绍了解决ElementUI中tooltip出现无法显示的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
ElementUI中tooltip出现无法显示
代码,当el-tooltip
标签中的元素添加v-if
时候,会出现无法显示问题
<el-tooltip class="item" effect="dark" width="200" placement="top"> <div slot="content" style="width: 400px"> {{ scope.row.approvalMsg ? scope.row.approvalMsg : '暂无拒绝原因' }} </div> <i v-if="scope.row.status === -1" class="el-icon-question" style="margin-left: 5px; cursor: pointer" ></i> </el-tooltip>
问题显示
解决办法
1. 可以直接在el-tooltip
标签上添加相同的v-if
标签判断
<el-tooltip class="item" effect="dark" width="200" placement="top" v-if="scope.row.status === -1" > <div slot="content" style="width: 400px"> {{ scope.row.approvalMsg ? scope.row.approvalMsg : '暂无拒绝原因' }} </div> <i v-if="scope.row.status === -1" class="el-icon-question" style="margin-left: 5px; cursor: pointer" ></i> </el-tooltip>
2. 可以把v-if
替换为v-show
<el-tooltip class="item" effect="dark" width="200" placement="top" > <div slot="content" style="width: 400px"> {{ scope.row.approvalMsg ? scope.row.approvalMsg : '暂无拒绝原因' }} </div> <i v-show="scope.row.status === -1" class="el-icon-question" style="margin-left: 5px; cursor: pointer" ></i> </el-tooltip>
让elementui的slider 一直显示tooltip
elementui的slider控件
<el-slider v-model="value1" :min="1" :max="100" :show-tooltip="true" :format-tooltip="formatTooltip" :disabled="isQuestion" ref="slider1" />
打印这个控件
this.$nextTick(() => { console.log(this.$refs.slider1) })
输出如下
调用这个函数,这个时候tooltip就显示出来了,问题解决
this.$nextTick(() => { this.$refs.slider1.setPosition(70) })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
今天小编就为大家分享一篇关于Vue唯一可以更改vuex实例中state数据状态的属性对象,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧2019-01-01Vue对Element中的el-tag添加@click事件无效的解决
本文主要介绍了Vue对Element中的el-tag添加@click事件无效的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-05-05vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题
这篇文章主要介绍了vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论