element-ui 获取级联选择器label值相关的问题

最新推荐文章于 2024-06-03 22:20:09 发布

原创最新推荐文章于 2024-06-03 22:20:09 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

本文详细介绍了在Element-UI中如何处理级联选择器的label值获取问题，包括点击节点获取label和pathLabels的方法，以及针对可搜索级联选择器，通过自定义函数getCascaderObj遍历数据模型来解决getCheckedNodes()无法获取节点对象的问题。

element-ui 获取级联选择器label值相关的问题

2020/3/30

1.点击节点获取

var checkedNodes = this.$refs["cascaderUnit"].getCheckedNodes();

// console.log(checkedNodes); // 获取当前点击的节点
// console.log(checkedNodes[0].label); // 获取当前点击的节点的label
// console.log(checkedNodes[0].pathLabels); // 获取由 label 组成的数组

2.可搜索

在这里插入图片描述

可搜索的级联选择器，通过搜索筛选出的值，点击后，通过getCheckedNodes()获取不到节点对象，而官方文档并没有提供这样的方法（比较坑）

解决方法：通过遍历整个数据模型，拿到我们想要的值

        /**
         * @ name: getCascaderObj
         * @ params: val搜索出的数组,option数据模型
         * @ description :
         * @ author : njx
         * @ date : 2020-03-30 15:08:42
         * @ version: V1.0.0
         * */
        getCascaderObj(val, opt) {
            return val.map(function(value, index, array) {
                for (let itm of opt) {
                    if (itm.id === value) {
                        opt = itm.children;
                        return itm;
                    }
                }
                return null;
            });
        },

完整代码参考：

handleNode(val) 是级联选择器的change事件

handleNode(val) {
    if (val.length === 0) {
        return;
    }
    var checkedNodes = this.$refs["cascaderUnit"].getCheckedNodes();
    if(checkedNodes.length !== 0) {
        this.$emit("getId", val[0], checkedNodes[0].label); // id,lable
    }else{
        let label = this.getCascaderObj(val, this.options)
        this.$emit("getId", val[0], label[label.length - 1].orgName); // id,lable
    }

    this.value = val;

    // console.log(checkedNodes); // 获取当前点击的节点
    // console.log(checkedNodes[0].label); // 获取当前点击的节点的label
    // console.log(checkedNodes[0].pathLabels); // 获取由 label 组成的数组

    this.$refs.cascaderUnit.dropDownVisible = false; // 监听值发生变化就关闭它
},