问题
级联选择器选中回显后，由于长度过长导致展示不全，添加ei-tooltip,悬浮展示选中内容
核心内容
1、通过
ref获取el-cascader实例，调用getCheckedNodes()获取选中节点，通过pathLabels属性拿到节点的label数组。 2、通过设置el-tooltip的disabled，来控制el-tooltip的显隐
实现代码
没有默认值时，通过change事件去获取tooltip展示内容，如下：
// 用el-tooltip包裹el-cascader，自定义tooltipValue存放选中节点的内容.
// disabled设置当没有内容时，tooltip不展示
<template>
<el-tooltip placement="bottom-start" :content="tooltipValue" :disabled="!tooltipValue">
<el-cascader
ref="cascaderRef"
v-model="selectedVal"
:options="optionsList"
@change=“changeEvent"
></el-cascader>
</el-tooltip>
</template>
<script>
export default {
data() {
return {
tooltipValue: "", // 存放选中回显
selectedVal:[], // 选中节点
optionsList:[{lable:'测试',value:'1',children:[{label:'第二层',value:'2'}]}]
}
}，
methods: {
changeEvent() {
const selectedNodes = this.$refs.cascaderRef.getCheckedNodes(); // 通过ref获取选中节点
if (selectedNodes.length && selectedNodes[0]) {
//该列子做的是级联单选，所以只需要拿第一个节点，然后获取节点的pathLabels，就是它的完整选中内容
this.tooltipValue = selectedNodes[0].pathLabels.join("/");
}
},
}
}
</script>
有默认值时，通过watch事件去获取tooltip展示内容，如下：
// 用el-tooltip包裹el-cascader，自定义tooltipValue存放选中节点的内容
<template>
<el-tooltip placement="bottom-start" :content="tooltipValue" :disabled="!tooltipValue">
<el-cascader
ref="cascaderRef"
v-model="selectedVal"
:options="optionsList"
></el-cascader>
</el-tooltip>
</template>
<script>
export default {
data() {
return {
tooltipValue: "", // 存放选中回显
selectedVal:[], // 选中节点
optionsList:[{lable:'测试',value:'1',children:[{label:'第二层',value:'2'}]}]
}
},
watch: {
selectedVal: {
handler(val) {
if (val && val.length > 0) {
this.$nextTick(() => {
const selectedNodes =
this.$refs.cascaderRef.getCheckedNodes(true);
if (selectedNodes.length && selectedNodes[0]) {
this.tooltipValue = selectedNodes[0].pathLabels.join("/");
}
});
} else {
this.tooltipValue = "";
}
},
immediate: true,
},
},
mounted:{
this.init()
},
methods: {
init() {
// 有些需求需要调用接口默认选中节点，这里用setTimeout模拟
setTimeout(()=>{
this.selectedVal = ['1','2']
},1000)
},
}
}
</script>
