element-plus文本内容超过一定宽度，用省略号代替，并且出现tooltip

span里的文本超出了一定的宽度，那么需要给他指定一个ref，由于我的这个span的内容是通过v-for得到的，ref的值必须是唯一的，所以ref的值也需要循环生成

    <div class="card-header">
        <el-tooltip
             :content="item.name"
             :disabled="isShowTooltip"
             effect="dark"
             placement="top"
        >
    		<div @mouseover="onMouseOver(item.name)"  class="card-title" >
     			 <span :ref="el=>cardHeaderRef[item.name] = el">{{ item.name }}</span>
   			</div>
    	</el-tooltip>
	</div>

//是否显示toolTip
let isShowTooltip = ref(false)
const onMouseOver = (text) => {
  const tag = cardHeaderRef.value[text]
  const parentWidth = tag.parentNode.offsetWidth
  const contentWidth = tag.offsetWidth
  isShowTooltip.value = contentWidth <= parentWidth
}

css

.card-title{
  font-size: 11px;
  width: 90px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}