Cascader 级联选择器：获取选中后输入框中的值

今天药忘吃喽~ 2024-03-23 22:15 81阅读 0赞

element Plus为我们提供了一个很好的级联选择工具Cascader，可以实现级联选择效果。但有时候，我们不仅要知道被选中的key数组，还想获取到选中后显示在输入框中的值。![d0534e5744ae4c09be1ae9fe3dd0b441.jpeg][]

此时就需要用到Cascader引用对象的\_rawValue属性。来看一下它到底提供了什么信息：

![e70f0a0df94142b082ede55822a632d7.jpeg][]

可以清楚的看到，通过\_rawValue属性的getCheckedNodes()方法，得到了一个node节点信息，除了包含Text属性外，还包含了各层级对象信息。也就是说，我们不仅可以通过depRef.\_rawValue.getCheckedNodes()\[0\]获取Cascader输入框中的文本信息，还可以通过它获取到被选中项的各层级节点对象，以及各层级id数组集合pathValues。这样一来，就可以知道被选中项的完成的层级信息，包括各层级对象的命名和id。在类似填充个人组织部门信息时，是非常有用的一个操作。

另外多说一点，当我们利用Cascader进行级联选择时，就像我这里呈现的可选择任意一级选项的效果，也就是将checkStrictly属性置为true，当已经选中后，应立即关闭下拉框。但Cascader组件默认是不会提供这样的效果的，需要我们手动去关闭下拉框。其实也很简单，只需要在change监听实践中，增加关闭逻辑即可，如下所示：

depRef.value.togglePopperVisible();

*depRef是Cascader的引用对象，使用的是element plus框架*

需要注意的是，上面的写法是Vue3的写法，Vue2的表达式如下所示：

this.$refs.depRef.togglePopperVisible()

如果你使用的是element ui，需要用下面的代码关闭下拉框：

this.$refs.depRef.dropDownVisible = false

另外，可以根据引用对象的popperVisible属性判断，当前下拉框是否处于显示状态，如果是，就关闭下拉框：

if (!depRef.value.popperVisible) {
      depRef.value.togglePopperVisible() 
    }

以上就是Cascader 级联选择器的一些操作小技巧，希望对大家有所帮助。

[d0534e5744ae4c09be1ae9fe3dd0b441.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/23ba601afb814ec283476b13897d6621.png
[e70f0a0df94142b082ede55822a632d7.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/bed4f6be514146b7b7a45eedbe135a06.png