vue3项目中el-tooltip实现内容溢出时再显示，并设置tip的最大宽度

 html代码

<el-tooltip :disabled="!textIsOverflow" placement="top"><template #content><div class="tooltip-div">tootip的内容</div></template><div class="textOverflow" ref="textRef">触发的内容，这里要处理成溢出采用省略号效果，配合tooltip食用，完美</div></el-tooltip>

js代码

const textRef = ref();
const textIsOverflow = ref(false);
// 判断内容是否超出div的宽度
const checkIsOverflow = () => {if (textRef.value) {const clientW = textRef.value.clientWidth;const scrollW = textRef.value.scrollWidth;textIsOverflow.value = scrollW > clientW;}
};
onMounted(() => {// nextTick(() => {checkIsOverflow();// 这行代码放在tip使用的数据返回的地方，获取不到dom元素的话配合nextTick使用。或者放在onMounted里。// })
})

css代码

.tooltip-div {max-width: 200px;
}.textOverflow {width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: default;
}