antDv 级联选择器（a-cascader）通过接口动态加载数据

踏浪而行foreval

已于 2023-03-15 13:46:43 修改

阅读量5.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： H5 vue 文章标签： javascript vue.js html5

于 2021-02-02 11:03:32 首次发布

本文链接：https://blog.csdn.net/weixin_45849072/article/details/113543308

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

14 篇文章

订阅专栏

本文介绍如何在Vue项目中利用a-cascader组件实现库位的多级联动选择功能。文章详细展示了通过父级id获取子级数据并更新到selectItem的过程，同时提供了具体的方法实现，如loadOptionsData和doLoadOptionsData等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每次子选择器的内容都是通过将父级id传给接口获取到最终保存到data中参数selectItem格式为 xxx,xx,x

<a-cascader
    :options="options"
    :load-data="loadOptionsData"
    placeholder="请选择库位信息"
    change-on-select
    v-model="queryParam.positionCode"
    @change="onChange"
/>

data数据

options: [], // 库位下拉框数据
selectItem: '',

methods

// 获取库位的options
loadOptionsData(selectedOptions) {
    console.log(selectedOptions)
    const targetOption = selectedOptions[selectedOptions.length - 1]
    console.log(targetOption)
    this.doLoadOptionsData(targetOption, (array) => {
        console.log('...targetOption', targetOption)
        targetOption.children = array
        this.options = [...this.options]
    })
},

doLoadOptionsData(targetOption, callback = null) {
    getAction(this.url.getOptions, { code: this.selectItem }).then((res) => {
        var array = []
        res.result.map((item) => {
            array.push(Object.assign(item, { isLeaf: item.type == 'POSITION' }))
        })

        if (callback) {
            callback(array)
        }
    })
},
onChange(value) {
    console.log(value)
    this.selectItem = JSON.stringify(value).replace(/"/g, '').replace(/\[/g, '').replace(/\]/g, '')
    console.log(this.selectItem)
},
// 没有调用但是不能删除
initDictConfig() {
    getAction(this.url.getOptions).then((res) => {
        res.result.map((item) => {
            this.options.push(Object.assign(item, { isLeaf: false }))
        })
        console.log(this.options)
    })
},

欢迎大家关注我的公众号「踏浪而行生活圈」，这里不仅有更多好玩的内容，还会同步更新踏浪而行最新资讯，让你时刻掌握科技前沿，快来加入我们吧！