这里结合el-tooltip实现
<el-tooltip :visible="visible" :content="title" placement="top-start">
<div @mouseenter="mouseenter" @mouseleave="visible = false">
<el-cascader
ref="cascaderRef"
v-model="cascaderValue"
:options="cascaderOption"
:props="propsCascader"
filterable
clearable
@change="changeCascader"
/>
</div>
</el-tooltip>
const title = ref("");
const cascaderRef = ref(null);
function changeCascader() {
// 获取选中的节点
const node = cascaderRef.value.getCheckedNodes();
// 选中节点的全路径
title.value = node[0].text;
}
const visible = ref(false)
// 鼠标经过时显示
function mouseenter() {
// 这里按需求定义的是字符超过10个时,框框显示不全时才显示文字提示
if (title.value.length>10) {
visible.value = true
} else {
return
}
}
如若需实现节点内容的title,则:
<el-cascader
ref="cascaderRef"
v-model="cascaderValue"
:options="cascaderOption"
:props="propsCascader"
filterable
clearable
@change="changeCascader"
>
<template #default="{ data }">
<span v-text="data.name" :title="data.name"></span>
</template>
</el-cascader>