Element Cascader 级联选择器多选默认值和下拉框清空的坑

需求：多选、显示最后一级的节点、可搜索、加载时显示默认值。

显示：

 

代码

data: function () {
     return {
        dataRefValue:[["0110","011001"],["0150"],],//多选格式
        vm.dataForType:[],
        props: {
                    label: 'name',
                    value: 'tagsCode',
                    children: 'children',
                    multiple: true,//多选
                    disabled: 'disabled'
                },
    }
}

 methods: {
        cascaderChange(){
                console.log(vm.dataRefValue)
                console.log(this.$refs.dataRef.getCheckedNodes())
        },
               
          }

中间遇到的坑，默认值问题:this.$refs.dataRef.setCheckedNodes([data])这个方法是tree的，在cascader里面用不了，所以要给组件绑定v-model,v-model我绑定的dataRefValue，一开始初始值给的dataRefValue:['1','2'],然后发现页面回显，改为['1','2',]，在最后一个值后面加个逗号就可以了。

 

在说清空取参，一开始用的我绑了一个refs，使用了this.$refs.dataRef.getCheckedNodes()是可以取值的，但是清空时发现在下拉框取消点选，和在选择框点最后叉号取消这两个方法都没问题this.$refs.dataRef.getCheckedNodes()取的值都是正确的，如图：

 

上面两种是对的，但是在选择框点数据后面的叉号，如图：

会发现this.$refs.dataRef.getCheckedNodes()里面的值显示的点选前的数据，也就是当我选择框数据一个个点完清空以后还会取到最后一个的值。解决方法就是不用this.$refs.dataRef.getCheckedNodes()取值，直接取v-model里面的值。需要注意的v-model里面的值是带上层级的数据所以遍历的时候可以用下面的方法来获取子节点

for (let item of vm.dataRefValue) {
        console.log(item[item.length-1])
           
    }