Cascader 级联选择器无法高亮问题

最近使用 vue+element UI 框架开发前端项目，用到比较多的是 Cascader 级联选择器。使用过程中有一些心得借此机会跟大家分享一下。 Cascader 级联选择器就是当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。在 Element 官网上可以查到它的基础用法，代码如下：

<div class="block">
  <span class="demonstration">hover 触发子菜单</span>
  <el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange">
  </el-cascader>
</div>

它默认的触发方式是 click，如果选择 hover 方式触发，可以对 props 参数设置，将 Trigger 方式改为 hover。 在我的项目中，我想做一个点击按钮，当鼠标点击按钮时就会出现级联选项菜单，当选中选项后就把这个子节点的id传到父组件，参考代码如下：

<template>
  <el-cascader
    :value="value"
    :options="options"
    :props="Hoption"
    @change="handleChange"
  />
</template>
export default{
  data(){
   
  }
}

页面效果图如下：

但是在自己测试的时候发现一个问题，就是刚开始进入这个页面的时候已选中的选项不会高亮，这就不美好了，我不想这样， 我希望 Cascader 级联选择器默认第最后一个选项且我刚进入这个页面的时候最后一个选项就要显示高亮，options 的数据格式是树形结构。
如下所示：

 options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }],

我刚开始是在el-cascader组件绑定一个change事件，每次点击都可以获得一个数组 我开始是采用简单的取数组值 value[value.length - 1]，但是这并不能解决高亮问题，于是我去官网逛了一圈，果然让我找到了一个解决方案。
如图所示：

什么意思呢，正常在这个组件我们没有设置这个属性的时候，默认是true，返回的是一个数组，数组的长度取决于数据树形结构的深度了，这也是上面说到为什么要用value[value.length - 1]来取数组值了，那么如果我们把这个属性加上设置为false会给我们什么值呢？
如图所示：

这样就可以获得每个菜单树的子节点了且每次刷新对应的选项也都会高亮。页面效果如下：

至于为什么会这样，那就在这里给大家拓展一下emitPath的原理 ：
emitPath 是 Cascader 组件的一个事件，用于在选择器的数值发生变化时，将选中的路径信息传递给父组件或其他监听该事件的组件
emitPath 的原理可以简单描述为以下几个步骤：

1. Cascader 组件内部维护了一个状态来保存当前选中的路径信息。该路径信息是一个数组，每一级的选中值都存储在数组的对应索引位置。
2. 当用户在 Cascader 组件中进行选择时，会触发相应的选中事件。在事件处理程序中，会更新组件内部的路径信息，并触发 emitPath 事件。
3. 在 emitPath 事件触发时，Cascader 组件会将当前的路径信息作为参数传递给该事件的监听器。这样，父组件或其他监听该事件的组件就可以获取到选中的路径信息。
4. 监听 emitPath 事件的组件可以根据接收到的路径信息，进行相应的处理，例如更新自身的状态、展示选中路径等。

总结来说，emitPath 的原理就是在 Cascader 组件内部维护路径信息，并在用户进行选择操作时，更新路径信息并触发事件，以便将选中的路径信息传递给其他组件进行处理。这样可以实现级联选择器的多级联动功能。

好了 关于 Cascader 级联选择器 的分享就写到这里啦，如果后续还有会再补充进来。希望可以帮助到有类似需求的人。