ant design vue 级联组件：无限级加载

1、组件

    <a-cascader
        :options="options"
        placeholder="请选择查询人员部门"
        change-on-select
        @change="onChange"
        :auto-focus="true"
        :value="selectCascader"
    />

2、data

     options: [],
     selectCascader: [], //存储所选数组id，用于设置指定值

3、关键方法

// 级联change
        onChange(value) {
            this.selectCascader = value //存储所选数组id
        },
        // 加载一级级联数据
        loadCascader() {
            accountApi.getSubDepart('').then((res) => {
                const resData = res.data
                if (resData.success) {
                    let dataArr = resData.data
                    if (dataArr.length > 0) {
                        // 一级数据处理
                        dataArr.map((val) => {
                            let isLeaf = val.isHave === 'false' ? true : false
                            let obj = {
                                value: val.value,
                                label: val.label,
                                isLeaf: isLeaf,
                            }
                            this.options.push(obj)
                        })
                    }
                    // 关联下级
                    this.options.map((val, index, arr) => {
                        this.loadSubCascader(val.value, arr)
                    })
                }
            })
        },
        // 迭代加载下级级联数据
        loadSubCascader(id, arr) {
            accountApi.getSubDepart(id).then((res) => {
                const resData = res.data
                if (resData.success) {
                    let dataArr = resData.data
                    if (dataArr.length > 0) {
                        for (let j = 0; j < dataArr.length; j++) {
                            // 迭代加载下级
                            this.loadSubCascader(dataArr[j].value, dataArr)
                            for (let i = 0; i < arr.length; i++) {
                                if (dataArr[j].parent === arr[i].value) {
                                    const targetOption = arr[i]
                                    targetOption.children = []
                                    targetOption.children = dataArr
                                }
                            }
                        }
                        this.options = [...this.options]
                    }
                }
            })
        }

在created执行一下 loadCascader() 即可赋予options数据
4、接口说明

image.png

    // ------------------------部门级联begin--------------------------
    // 查询下级部门
    getSubDepart(pid){
        return axios.get(`${api.baseUrl}/tenant/org/getList?parentId=${pid}`)
    },
    // 查询上级部门
    getSupDepart(id){
        return axios.get(`${api.baseUrl}/tenant/org/getList?id=${id}`)
    },
    // --------------------------部门级联over--------------------------

5、设置指定值

        // 迭代获取部门上级id
        getSupDepart(id) {
            accountApi.getSupDepart(id).then((res) => {
                let resData = res.data
                if (resData.success) {
                    let data = resData.data
                    if (data[0].parent !== null) {
                        // parent不为null表示存在上级，否则上级不存在，这时已到第一级
                        this.defaultV.unshift(data[0].parent)
                        this.getSupDepart(data[0].parent)
                    }
                }
            })
        },

6、呃......暂时没啥可说的了！！！

微信图片_20180104093239.jpg