需求: 在前端使用element-ui的级联选择器的时候,经常会出现因为组件展示不了全路径而造成不便,如图:
现在需要在鼠标悬浮的时候展示出全路径。
// 组件源码取自element-ui官网并删减部分数据,链接为https://element.eleme.cn/#/zh-CN/component/cascader
<template>
<div id="root">
<el-cascader
v-model="value"
:options="options"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
value: [],
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}, {
value: 'zujian',
label: '组件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'breadcrumb',
label: 'Breadcrumb 面包屑'
}, {
value: 'dropdown',
label: 'Dropdown 下拉菜单'
}, ]
},]
}]
};
}
}
</script>
实现: 显示全路径的话,由于el-cascader没有相关配置参数,因此需要结合el-tooltip组件来进行展示
<div id="root">
<el-tooltip :content="showContent" :disabled="!showContent">
<el-cascader
v-model="value"
:options="options"
></el-cascader>
</el-tooltip>
</div>
然后通过监视绑定值value变化(或者触发组件的change事件)修改showContent的值来控制tooltip的显示。
这里需要先给组件增加ref属性(如果使用触发change事件需要给组件绑定事件)
<template>
<div id="root">
<el-tooltip :content="showContent" :disabled="!showContent">
<el-cascader
ref="cascader"
v-model="value"
:options="options"
@change="handleChange"></el-cascader>
</el-tooltip>
</div>
</template>
<script>
export default {
// data部分省略,注意需要新加showContent属性
methods: {
handleChange(value){
this.handleContent(value)
},
handleContent(value){
// 获得当前组件
const cascader = this.$refs.cascader
// 根据变化后的值获得节点信息
// 如果项目中绑定的value值经过处理不是数组而是选中的叶子节点的value,则可以直接获取节点
// const node = cascader.panel.getNodeByValue(value)
// 否则需要先获得叶子节点值再获得节点。由于cascader默认保存的value数据是按从父到子的顺序保存的,因此数组中的最后一个值就是叶子节点值
const leaf = value[value.length-1]
const node = cascader.panel.getNodeByValue(leaf)
// 获得全路径内容
this.showContent = node.getText(cascader.showAllLevels, cascader.separator)
}
},
}
如果使用监视value则在watch中调用handleContent,注意需要传入的是监视修改后的newVal值
效果: 最后实现效果如下