关于在vue3中使用v-for动态ref并控制el-tooltips当文字溢出时才展示的问题

        大致需求是，用v-for渲染了一个表格，表格内容有些会溢出，有些不会。我们只想让溢出的内容展示el-tooltips，不溢出的内容没有必要去展示。

        话不多说，直接上代码(部分)。

<div class="boxItem" v-for="(v, i) in list" :key="i">
          <div class="boxItem-left">{{ v.label }}</div>
          <div class="boxItem-right" :ref="(el) => getRef(el, i)"            
               @mouseover="showEllipsis(i)">
            <el-tooltip effect="dark" :content="v.value" placement="top" 
                :disabled="!isEllipsis">
              <span>{{ v.value ? v.value : '--' }}</span>
            </el-tooltip>
          </div>
        </div>

// 存放动态ref
const refList = ref([])
const getRef = (el: any, i: any) => {
  if (el) {
    refList.value[i] = el
  }
}
// 判断文字是否超出
const isEllipsis = ref()
const showEllipsis = (index: any) => {
  const sWidth = refList.value[index].scrollWidth
  const cWidth = refList.value[index].clientWidth
  if (sWidth > cWidth) {
    // 实际宽度 > 可视宽度  文字溢出
    isEllipsis.value = true
  } else {
    // 否则为不溢出
    isEllipsis.value = false
  }
}

.boxItem-right {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}