解决ElementUI中tooltip出现无法显示的问题
作者:小火车况且况且
这篇文章主要介绍了解决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) })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。