**关于 Element 中el-tooltip动态访问接口加载数据**

关于 Element 中el-tooltip动态访问接口加载数据

例子：表格el-table中嵌套el-tooltip中的数据要通过接口访问到再显示

ref是为了区分table多个column中tooltip不重复 v-model 直接给当前行添加一个tooltipStatus字段

<el-table-column prop="couponNum" label="优惠券">
  <template slot-scope="scope">
	<el-tooltip
	   placement="top"
	   :ref="scope.row.id"
	   v-model="scope.row.tooltipStatus"
	 >
	   <div slot="content">
	     自用券{{ couponData.helpCouponCount }}张<br />分享券{{
	       couponData.shareCouponCount
	     }}张
	   </div>
	   <span class="text-oper">{{ scope.row.couponNum }}</span>
	 </el-tooltip>
  </template>
</el-table-column>

通过调用table中的 @cell-mouse-enter @cell-mouse-leave对特定列进行操作调取接口

<el-table @cell-mouse-enter="hoverTip" @cell-mouse-leave="leaveTip">
	
</el-table>

methods:{
	hoverTip(row, column) {
	  if(column.label === "你想要调起的单元格名称") {
		//调用接口
	    row.tooltipStatus = true;
	  }
	},
	leaveTip(row) {
	  if(column.label === "你想要调起的单元格名称") {
	    row.tooltipStatus = false;
	  },
	}
}
}

最终效果：当鼠标放在优惠券上显示自用券、分享券提示弹框

好了，就这么多，有更优化方法欢迎互相讨论！

最后

以上就是眼睛大戒指最近收集整理的关于**关于 Element 中el-tooltip动态访问接口加载数据**的全部内容，更多相关**关于内容请搜索靠谱客的其他文章。