级联数据懒加载

<div v-for="(item, index) in qualitysList" :key="index" class="mb-20">
<el-cascader
                                    :value="item.cateValue"
                                    :options="lazyCategoryDataScreening(item.cateValue)"
                                    :props="{
                                        ...CATEGORY_PROPS,
                                        multiple: true,
                                        emitPath: false,
                                        disabled: 'disabled',
                                        lazy: true,
                                        lazyLoad: (node, resolve) => lazyLoad(node, resolve)
                                    }"
                                    placeholder="请选择"
                                    class="mx-10 w-60"
                                    filterable
                                    :show-all-levels="false"
                                    :debounce="800"
                                    :collapse-tags="item.cateValue.length > 10 ? true : false"
                                    @visible-change="visibleChange()"
                                    popper-class="serviceCascader"
                                    @change="v => changeSelectionCategory(v, item.cateValue, index)"
                                ></el-cascader>
</div>
//用来获取页面显示的初始数据
this.getShopQualificationsFn()


data() {
        return {
CATEGORY_PROPS:{ children: 'child', label: 'name', value: 'id' },
qualitysList:[], //显示页面的数据
lazyAllCategory:[] //存储的级联数据
        }
},
methods:{
visibleChange() {
            this.$nextTick(() => {
                // 添加这段代码解决搜索时性能问题
                const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]')
                Array.from($el).map(item => item.removeAttribute('aria-owns'))
            })
        },
//获取数据
        async getShopQualificationsFn() {
            let { selectShopId } = this
            let data = await xxxxxxxxxx({ shopId: selectShopId })
            let { quality_list} = data
            this.qualityList = quality_list
                //这个是获取级联第一层数据的请求
                let levelOneData = await xxxxxx({ sysId, sortId: '0', type: 0, noLoading: false })
                for (const [idx, item] of levelOneData.entries()) {
                    nodes.push({ ...item, leaf: item.isleaf })
                }
                this.lazyAllCategory = [...nodes]
                this.echoDataFn() //回显数据的请求方法
            
        },
//lazy级联选择器的数据改造
        lazyCategoryDataScreening(cateValue) {
//这个函数是我自己的项目用来处理多个级联数据互斥的

            let newLazyData = _.cloneDeep(this.lazyAllCategory)
            //除了自身，所有选中的类目
            let allCateValue = []
            for (const [index, value] of this.qualitysList.entries()) {
                for (const [idx, val] of value.cateValue.entries()) {
                    if (!cateValue.includes(val)) {
                        allCateValue.push(val)
                    }
                }
            }
            let receiverContainer = []
            if (allCateValue.length) {
                const processData = data => {
                    // 处理数据，在每个选项中添加 disabled 属性
                    return data.map(option => {
                        if (option.child && !option.isleaf) {
                            option.child = processData(option.child)
                        }
                        return { ...option, disabled: allCateValue.includes(String(option.id)) }
                    })
                }
                receiverContainer = processData(newLazyData)
            } else {
                receiverContainer = newLazyData
            }
            return receiverContainer
        },

async lazyLoad(node, resolve) {
            const { level } = node
            if (node.data && node.data.leaf) return resolve()
            let nodes = []
            let sortId = level == 0 ? '1' : node.value
            if (sortId === '1') {
                resolve([])
            } else {
                if (node.data && node.data.child && node.data.child.length) return resolve([])
//这个是根据类目获取级联数据的请求
                let data = await xxxxxx({ sortId: sortId, type: 0, noLoading: false })
                for (const [idx, item] of data.entries()) {
                    nodes.push({ ...item, leaf: item.isleaf })
                }
                let newLazyAllCategory = this.addToObjectById(this.lazyAllCategory, sortId, nodes)
                this.lazyAllCategory = [...newLazyAllCategory]
                resolve([])
            }
        },
//这个函数是件请求回来的数据和之前的数据进行拼接的
        addToObjectById(obj, targetId, newData) {
            // 创建一个新的数组对象，避免直接修改原始数据
            const updatedObj = JSON.parse(JSON.stringify(obj))
            // 遍历数组对象
            for (let i = 0; i < updatedObj.length; i++) {
                // 如果找到目标ID
                if (updatedObj[i].id === targetId) {
                    // 添加新数据
                    updatedObj[i].child = newData
                    return updatedObj
                }
                // 如果当前元素有子元素且为数组类型，递归调用
                if (updatedObj[i].child && updatedObj[i].child.length > 0) {
                    const updatedChildren = this.addToObjectById(updatedObj[i].child, targetId, newData)
                    // 更新当前元素的子元素
                    updatedObj[i].child = updatedChildren
                }
            }
            // 如果没有找到目标ID，直接返回原始数组对象
            return updatedObj
        },

        echoDataFn() {
            //所有选中的类目  此处要拿的id都是最后一级的
            let allCatePathIdValue = []
            let newLazyData = _.cloneDeep(this.lazyAllCategory)
            for (const [index, value] of this.qualitysList.entries()) {
                for (const [idx, val] of value.catePathIds.entries()) {
                    allCatePathIdValue.push(val)
                }
            }
            if (allCatePathIdValue.length) {
                let callbackFn = params => {
                    let { index, idx, value } = params
                    if (allCatePathIdValue.length - 1 === index && value.length - 2 === idx) {
                        this.lazyAllCategory = _.cloneDeep(newLazyData)
                    }
                }
                this.$nextTick(async () => {
                    for (const [index, value] of allCatePathIdValue.entries()) {
                        for (const [idx, val] of value.entries()) {
                            for (const [idxA, itemA] of newLazyData.entries()) {
                                let params = { index, idx, value }
                                await this.addValueToId(itemA, val, params, callbackFn)
                            }
                        }
                    }
                })
            }
        },
        async addValueToId(data, id, params, callbackFn) {
            if (data.id == id && !data.isleaf) {
                if (!data.child) {
//这个接口是获取传入的这个类目id所返回的数据
                    let childLevelData = await xxxxxxxx({  sortId: id, type: 0, noLoading: true })
                    let nodes = []
                    for (const [idx, item] of childLevelData.entries()) {
                        nodes.push({ ...item, leaf: item.isleaf })
                    }
                    data.child = nodes
                    callbackFn(params)
                    return
                }
            }
            if (data.child) {
                for (const subcategory of data.child) {
                    this.addValueToId(subcategory, id, params, callbackFn)
                }
            }
        }

}


<style lang="scss">
//处理只有最后一级显示勾选框
.serviceCascader .el-cascader-panel ul > li[aria-haspopup='true'] .el-checkbox {
    display: none !important;
}
</style>