ElementUI中tooltip出现无法显示问题如何解决
这篇“ElementUI中tooltip出现无法显示问题如何解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ElementUI中tooltip出现无法显示问题如何解决”文章吧。
ElementUI中tooltip出现无法显示
代码,当el-tooltip标签中的元素添加v-if时候,会出现无法显示问题
<el-tooltipclass="item"effect="dark"width="200"placement="top"><divslot="content">{{scope.row.approvalMsg?scope.row.approvalMsg:'暂无拒绝原因'}}</div><iv-if="scope.row.status===-1"class="el-icon-question"></i></el-tooltip>问题显示解决办法
1. 可以直接在el-tooltip标签上添加相同的v-if标签判断
<el-tooltipclass="item"effect="dark"width="200"placement="top"v-if="scope.row.status===-1"><divslot="content">{{scope.row.approvalMsg?scope.row.approvalMsg:'暂无拒绝原因'}}</div><iv-if="scope.row.status===-1"class="el-icon-question"></i></el-tooltip>
2. 可以把v-if替换为v-show
<el-tooltipclass="item"effect="dark"width="200"placement="top"><divslot="content">{{scope.row.approvalMsg?scope.row.approvalMsg:'暂无拒绝原因'}}</div><iv-show="scope.row.status===-1"class="el-icon-question"></i></el-tooltip>让elementui的slider 一直显示tooltipelementui的slider控件<el-sliderv-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)})
以上就是关于“ElementUI中tooltip出现无法显示问题如何解决”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注行业资讯频道。