element中el-cascader使用props设置value、label、children

本文介绍如何在Vue中使用级联选择器(el-cascader)组件,并正确配置选项属性,实现多级数据的联动选择。通过示例代码展示了data结构及v-model、@change事件的使用。

从后端拿到arr数据结构:

cityList: [
	{
		id: 1,
		name: '北京',
		child: [
			id: 11,
			name: '大兴区',
			child: [
				id: 111,
				name: '亦庄'
			]
		]
	}
]

 vue文件代码

<el-cascader
    :options="cityList"
    :props="optionProps"
    v-model="selectedOptions"
    @change="handleChange">
</el-cascader>

 js

 

data: {
	optionProps: {
		value: 'id',
		label: 'name',
		children: 'child'
	}
}

 

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值