Cascader 级联选择器

在数据量比较大，数据又是一次性载入的时候，如果某一层级不存在子节点了（为叶子节点），然而后端返回的数据里还是有children字段，且值为空数组。这个时候当逐级展开的时候，就会出现最后一个层级还可以点击，且下级选项为空的情况，如下图：
1650794419(1).png
最开始我是这么想的，在拿到数据的时候，逐级遍历，如果该层级的children的长度为空的时候，就把children字段去除。但是，由于数据较多，且有五个层级，需要好几层的递归遍历，明显不能这么干。
于是，我产生了另一个想法🤔，让后端同学返回数据的时候直接返回给我有效数据😏。但是，后端同学没这么干，并且给了我一个新的思路：可以在点击的时候再判断被点击的层级有没有子节点，没有的话不进行展开。听起来好像很有道理🤣
继续探索，发现element-ui并没有提供点击选项获取节点信息的方法，而是提供了获取选中节点的方法。
试想一下，如果可以在点击选项的时候判断该节点是否还存在children，进而修改hasChildren为false。（isLeaf是只读属性，不可直接设置）不过，文档里面并没有提供这样的方法😮（有时间了扒扒源码瞅一眼）
be2e9c0b608d78d74359359cf38dfa6.jpg
仔细阅读文档，发现还可以这么干，先看效果图：
1650852689(1).png

实现方式：

  1. <el-cascader :options="options">
  2.   <template slot-scope="{ node, data }">
  3.     <span>{{ data.label }}</span>
  4.     <span v-if="!node.isLeaf"> ({{ data.children.length }}){{optNode(node)}} </span>
  5.   </template>
  6. </el-cascader>
  1. optNode(node) {
  2.   if (node.children && node.children.length) {
  3.     node.hasChildren = false
  4.   }
  5. }

getCheckedNodes 方法使用

  1. const nodesInfo = this.$refs.cascader.getCheckedNodes();