ant design vue级联组件：异步加载

1、组件:

        <a-cascader
             :disabled="disabled"
             :options="zhoptions"
             :load-data="loadzhData"
             placeholder="请选择租户"
             :fieldNames="fieldzhNames"
             @change="zhChange"
             :change-on-select="true"
             :auto-focus="true"
             :value="defaultzhV"
             v-if="!showzhInp"
        />

2、关键数据data:

            zhoptions: [
                {
                    id: '',
                    name: '租户',
                    isLeaf: false,
                },
            ],
            fieldzhNames: {
                value: 'id',
                label: 'name',
                children: 'children',
            },
            zhparentId: '', //租户上级id
            subZh: [], //下级租户

3、change方法:

zhChange(value) {
            this.zhparentId = value.length == 0 ? '' : value[value.length - 1]
            this.defaultzhV = value
            accountApi.getSubzh(this.zhparentId).then((res) => {
                const resData = res.data
                if (resData.success) {
                    this.subZh = resData.data
                }
            })

            accountApi.getSubzh(this.zhparentId).then((res) => {
                const resData = res.data
                if (resData.success) {
                    let dataArr = resData.data
                    if (dataArr.length > 0) {
                        this.loadzhData(dataArr)
                    }
                }
            })
        },

4、异步加载方法loadData:

loadzhData(selectedOptions) {
            const targetOption = selectedOptions[selectedOptions.length - 1]
            targetOption.loading = true
            targetOption.children = []
            setTimeout(() => {
                targetOption.loading = false
                accountApi.getSubzh(this.zhparentId).then((res) => {
                    const resData = res.data
                    if (resData.success) {
                        let dataArr = resData.data
                        for (let j = 0; j < dataArr.length; j++) {
                            for (let i = 0; i < this.subZh.length; i++) {
                                if (dataArr[j].id === this.subZh[i].id) {
                                    if (this.subZh[i].isHave == 'false') {
                                        targetOption.children.push({
                                            id: dataArr[j].id,
                                            name: dataArr[j].name,
                                            isLeaf: true,
                                        })
                                    } else if (this.subZh[i].isHave == 'true') {
                                        targetOption.children.push({
                                            id: dataArr[j].id,
                                            name: dataArr[j].name,
                                            isLeaf: false,
                                        })
                                    }
                                }
                            }
                        }
                    }
                })
                this.options = [...this.options]
            }, 500)
        },

5、效果:

image.png

6、说明:
getSubzh是一个根据上级id查询下级数据的接口，参数是上级id，如果上级id不存在查询的是第一级的数据，

getSubzh在change方法中调用了两次，否则会报错，

7、存在的问题:
无法对数据设置默认值。
因为数据 zhoptions是异步动态加载的，如果不对级联组件进行操作，它的数据是不完整的。如果你有解决的思路或方法，欢迎留言告知，在此谢过！！（^_）

补充：已更新，存在的问题已解决
ant design vue 级连组件无限级加载

最后编辑于：2020.07.28 17:11:16