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

el-cascader级联选择器通过tooltip显示全路径 实现了tooltip显示正常情况下el-cascader的选择内容，但是在项目中还会有其他的需求
需求： 当el-cascader组件接收默认的value值的时候，由于没有触发change事件或value的监视属性，因此并没有得到showContent的值，因此并不能显示全路径。并且，在有初始value情况下，如果el-cascader设置的disabled属性，那么就无法进行点击也就无法change等事件。

实现： 由于value已经有值，因此就是需要一种方式能够重新调用获取showContent的方法。这里可以使用原生方法鼠标移入事件mouseover。

@mouseover.native.once="handleChange"

因为使用的不是el提供的事件，因此需要加上native修饰；由于该事件触发之后，showContent就有值了，就不需要再次触发，因此用once修饰.
最终效果如下：

完整代码如下：

// 组件源码取自element-ui官网并删减部分数据，链接为https://element.eleme.cn/#/zh-CN/component/cascader
<template>
  <div id="root">
    <el-tooltip :content="showContent" :disabled="!showContent">
      <el-cascader
        ref="cascader"
        v-model="value"
        :options="options"
        :disabled="true"
        @mouseover.native.once="handleChange"
        @change="handleChange"></el-cascader>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  data() {
      return {
        value: ['zujian', 'navigation', 'dropdown'],
        showContent: '',
        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 下拉菜单'
            }, ]
          },]
        }]
      };
  },
  methods: {
    handleChange(){
      this.handleContent(this.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)
    }
  }
}
</script>