el-cascader三级联动地区数据回显

1、后端的json数据格式为

{
    "adcode": "370600",
    "name": "烟台市",
    "level": "city",
    "districts": [
        {
            "adcode": "370614",
            "name": "蓬莱区",
            "level": "district",
            "districts": [
                {
                    "adcode": "370614",
                    "name": "大柳行镇",
                    "level": "street",
                    "districts": []
                },
                {
                    "adcode": "370614",
                    "name": "村里集镇",
                    "level": "street",
                    "districts": []
                },
                {
                    "adcode": "370614",
                    "name": "大辛店镇",
                    "level": "street",
                    "districts": []
                }
            ]
        },
        {
            "adcode": "370612",
            "name": "牟平区",
            "level": "district",
            "districts": [
                {
                    "adcode": "370612",
                    "name": "文化街道",
                    "level": "street",
                    "districts": []
                },
                {
                    "adcode": "370612",
                    "name": "武宁街道",
                    "level": "street",
                    "districts": []
                },
            ]
        },
    ]
}

2、html部分

<el-cascader v-model="searchForm.address" placeholder="全部" :options="operationList" :props="props" clearable/>

3、js部分

export default {
    data() {
        return {
            searchForm: {
				address: '',
            },
            operationList:[{}],
            props:{
				children: 'districts',//子选项
				label: 'name',//指定选项标签为选项对象的某个属性值
				value: 'adcode',//指定选项的值为选项对象的某个属性值
				checkStrictly: true,//父子节点不互相关联
			}
        }
    },
    mounted(){
        this.getList()
    },
    methods: {
        // 加载数据
        getList() {
            $getAxios(api.getList, '', (res) => {
				if (res && res.code == 200) {
					this.operationList = res.data;
                    this.fn(this.operationAreaList)
				    
				}
            });
        },
        //最后一项,去掉暂无数据页
        //1、循环所有数据,判断是否还有子数据;2有继续循环,3无删除当前子集对象
        fn(list) {
		    list.forEach(item => {
			    if(item.districts&&Array.isArray(item.districts)&&item.districts.length>0) {
				    this.fn(item.districts)
				}else {
					delete item.districts
				}
			})
		},
    }
}

el-cascader是Element UI中的一个组件,用于实现级联选择器。它可以实现多级联动,并且支持回显已选择的值。 要实现el-cascader的三级联动回显,需要以下步骤: 1. 定义数据源:首先,你需要定义一个数据源,包含三级联动数据。每个级别的数据都是一个数组,其中包含了该级别的选项。 2. 绑定数据:将数据源绑定到el-cascader组件上,通过设置`:options`属性来实现。这样el-cascader就知道要显示哪些选项了。 3. 设置默认值:通过设置`v-model`属性,将默认值绑定到el-cascader组件上。默认值应该是一个数组,每个元素对应一个级别的选项。 4. 实现回显:当需要回显已选择的值时,只需将默认值设置为已选择的值即可。el-cascader会根据默认值自动展示已选择的选项。 下面是一个示例代码,演示了如何实现el-cascader的三级联动回显: ```html <template> <el-cascader v-model="selectedValues" :options="options" :props="props" @change="handleChange" ></el-cascader> </template> <script> export default { data() { return { selectedValues: [], // 默认值,用于回显已选择的值 options: [ { value: '1', label: '选项1', children: [ { value: '1-1', label: '选项1-1', children: [ { value: '1-1-1', label: '选项1-1-1' }, { value: '1-1-2', label: '选项1-1-2' } ] }, { value: '1-2', label: '选项1-2', children: [ { value: '1-2-1', label: '选项1-2-1' }, { value: '1-2-2', label: '选项1-2-2' } ] } ] }, // 其他级别的选项... ], props: { value: 'value', label: 'label', children: 'children' } }; }, methods: { handleChange(value) { console.log('已选择的值:', value); } } }; </script> ``` 在上述示例中,`selectedValues`数组用于存储已选择的值,通过设置`v-model`将其与el-cascader组件进行绑定。`options`数组定义了三级联动数据源,`props`对象指定了数据源中的属性名。 当需要回显已选择的值时,只需将已选择的值赋给`selectedValues`数组即可。el-cascader会根据`selectedValues`自动展示已选择的选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值