el-cascader级联选择器鼠标经过显示title(选中值全路径)

这里结合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>