Element2.x Cascader 级联选择器,动态加载(懒加载)

关键点是 lazyLoad(node, resolve) ，node 参数有个 data 属性，我们可以将自己需要的数据添加到这个 data 属性中

<el-form-item label="地址：">
    <el-cascader v-model="cascade_value" :props="cascade_props" @change="handlerCascadeChange"
                    style="width: 330px">
        <!--<template slot-scope="{ node, data }">
        <span>{{ data['extName'] || data['name'] }}</span>
        </template>-->
    </el-cascader>
</el-form-item>

data() {
    return {
        tableData: [],//table数据
        cascade_value: [],
        //cascade_options: [],
        cascade_props: {
            lazy: true,
            checkStrictly: true, //可以选择任意节点
            expandTrigger: 'click', //click/hover
            async lazyLoad(node, resolve) {
                const { data, level } = node
                if (level == 3) resolve([])
                const pid = data ? data['id'] : 0
                const resultData = await queryInfoByPid(pid) || []
                const nodes = resultData.map(item => ({
                    value: item['extName'] || item['name'],
                    label: item['extName'] || item['name'],
                    id: item['id'], deep: item['deep'],
                    leaf: level >= 3
                }))
                resolve(nodes)
            },
        },
        province: '',
        city: '',
        district: '',
    }
},//data
methods: {
    //级联选择器——change
    handlerCascadeChange(value){
        if (value) {
            this.province = value[0] || undefined;
            this.city = value[1] || undefined;
            this.district = value[2] || undefined;
        }
    },
}

function remote_queryInfoByPid(pid) {
    return new Promise((resolve, reject)=>{
        if (pid != 0 && !pid) {
            reject("缺少参数[pid]")
        } else {
            const url = `${base_url}/mall/chinaAreaInfo/queryInfoByPid/${pid}`
            axios.get(url).then(res=>{
                res = res.data
                if (res.status == 200) {
                    resolve(res.data)
                } else {
                    reject(res)
                }
            }).catch(res=>{
                reject(res)
            })
        }
    })
}

export async function queryInfoByPid(pid) {
    try {
        return await remote_queryInfoByPid(pid)
    } catch (err) {
        console.log(err)
        const errMsg = collectErrMsgV2(err, "查询超限")
        this.$message.error(errMsg)
        return [];
    }
}

• 关键点是 lazyLoad(node, resolve) ，node 有个 data 属性，我们可以将自己需要的数据添加到这个 data 属性中
• 在首次加载时是没有 data 属性的，据此我们可以定位首次加载
• 然后，可以向 data 添加数据，比如我需要 id ，就可以将 item.id 值加入，在下次加载时获取

async lazyLoad(node, resolve) {
    const { data, level } = node
    if (level == 3) resolve([])
    const pid = data ? data['id'] : 0
    const resultData = await queryInfoByPid(pid) || []
    const nodes = resultData.map(item => ({
        value: item['extName'] || item['name'],
        label: item['extName'] || item['name'],
        id: item['id'], deep: item['deep'],
        leaf: level >= 3
    }))
    resolve(nodes)
},

End