Cascader(级联选择器)---如何选择到叶子节点

824 阅读1分钟

级联选择器如何在动态加载的情况下选择到叶子结点

// 通常我们设置的属性就是 changeOnSelect,但是在动态加载子节点的情况下第一次会失效
// 可以使用displayRender这个属性

<a-cascader
    ...
    :displayRender="(labels) => displayRender(labels)"
/>

data(){
    return {
        lastLabels: ''
    }
}

// methods: labels: label数组   selectedOptions: 选择节点的数据
// 1.判断叶子结点条件
// 2.全局变量去记住上一个叶子结点
// 3.通过是否是叶子结点去返回 lastLabels 或者是 labels
displayRender({labels, selectedOptions}){
    let isLeaf = ...;
    isLeaf ? this.lastLabels = this.labels.join(' / ') : '';
    return this.lastLabels;
}

需要注意的点是:displayRender传过来的是一个对象,通过解析可以获得 labels 和 selectedOptions