vue 表格某列超出显示...,悬浮tip

vue 表格某列超出显示...,悬浮tip ;反之不显示tip

<el-table-column align="left"><template #header><span style="text-align: center;display: block;"><span>本次出入池</span><el-tooltipplacement="top"effect="light"><div slot="content"><span>调入:<span style="color: #f98e4d;">橙色</span></span>&nbsp;&nbsp;&nbsp;&nbsp;<span>调出:<span style="color: #35b0e9;">蓝色</span></span></div><spanclass="iconfont icon-wenhao"style="font-size: 14px;margin-left: 5px;"/></el-tooltip></span></template><template slot-scope="scope"><el-tooltip placement="top" :disabled="!scope.row.tooltipFlag"><div slot="content" style="white-space: pre-line;width: 350px;font-size:14px;max-height:16rem;overflow:auto"><divclass="in-sets"v-for="(item) in scope.row.inPoolList":key="item.poolId">{{ item.poolName }}</div><divclass="out-sets"v-for="(item) in scope.row.outPoolList":key="item.poolId">{{ item.poolName }}</div></div><divstyle="text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;position: relative;"@mouseenter="visibilityChange(scope.row,$event)"><divclass="in-set"v-for="(item) in scope.row.inPoolList":key="item.poolId">{{ item.poolName }}</div><divclass="out-set"v-for="(item) in scope.row.outPoolList":key="item.poolId">{{ item.poolName }}</div></div></el-tooltip></template></el-table-column>

//方法
visibilityChange(row,event){const ev = event.targetif (ev.clientHeight < ev.scrollHeight) {// 如果实际内容高度 > 文本高度 ，就代表内容溢出了this.$set(row,'tooltipFlag',true);} else {// 否则为不溢出this.$set(row,'tooltipFlag',false);}},