el-cascader级联选择器通过tooltip显示全路径

el-cascader级联选择器通过tooltip显示全路径

最终效果：

<template>
  <div id="root">
    <el-tooltip :content="showContent" :disabled="!showContent">
      <el-cascader
        ref="parkCascader"
        v-model="buildId"
        :options="options"
        :props="getOptionData"
        @change="handleChange"></el-cascader>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  data() {
      return {
        buildId: "",
        showContent:"",
        getOptionData:{
        emitPath:false,
        expandTrigger:'hover',
        value:'parkId',
        label:'parkName',
        children:'childrenList'
      },
        options: [{
          parkId: 'zhinan',
          parkName: '指南',
          childrenList: [{
            parkId: 'shejiyuanze',
            parkName: '设计原则',
            childrenList: [{
              parkId: 'yizhi',
              parkName: '一致'
            }, {
              parkId: 'fankui',
              parkName: '反馈'
            }]
          }, {
            parkId: 'daohang',
            parkName: '导航',
            childrenList: [{
              parkId: 'cexiangdaohang',
              parkName: '侧向导航'
            }, {
              parkId: 'dingbudaohang',
              parkName: '顶部导航'
            }]
          }]
        }, {
          parkId: 'zujian',
          parkName: '组件',
          childrenList: [{
            parkId: 'basic',
            parkName: 'Basic',
            childrenList: [{
              parkId: 'layout',
              parkName: 'Layout 布局'
            }, {
              parkId: 'color',
              parkName: 'Color 色彩'
            }]
          }, {
            parkId: 'navigation',
            parkName: 'Navigation',
            childrenList: [{
              parkId: 'breadcrumb',
              parkName: 'Breadcrumb 面包屑'
            }, {
              parkId: 'dropdown',
              parkName: 'Dropdown 下拉菜单'
            }, ]
          },]
        }]
      };
  },
  methods: {
    handleChange(value){
      this.handleContent(value)
    },
    handleContent(value){
      // 获得当前组件
      const cascader = this.$refs.parkCascader
      // 根据变化后的值获得节点信息
      // 如果项目中绑定的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)
    }
  },
  watch:{
    "buildId":function(){
      this.departmentContent = "";
      if(this.buildId != ""){
        this.handleDepartmentContent(this.buildId)
      }
    },
  }
}
</script>

原文链接：https://blog.csdn.net/Jaca_Rand/article/details/125005474