element Cascader级联选择器数据懒加载回填实践

最新推荐文章于 2024-08-21 10:27:11 发布

天灰灰、欲落雨☔

最新推荐文章于 2024-08-21 10:27:11 发布

阅读量1.3k

点赞数 1

文章标签： vue elementui

本文链接：https://blog.csdn.net/qq_39373940/article/details/115168215

版权

本文介绍了如何在Vue项目中利用ElementUI的Cascader组件实现省市区地址的懒加载回填。在加载一级省列表后，通过获取已选择的省市区ID，动态设置v-model，接着根据父级ID请求各级的children数据，完成选择菜单的填充。文章鼓励读者深入研究Cascader组件源码以进一步优化代码。

摘要由CSDN通过智能技术生成

业务场景：使用Cascader级联选择器懒加载选择省市区地址。
准备：element版本2.15.1；后端提供获取省市区接口、已选择的省市区ID。
主要思路：在Cascader组件加载了第一级的省列表之后，获取已选择的省市区ID，设置到v-model动态绑定的值中，然后根据父级ID去将各级的children列表都获取，并设置选中MENU。

<template>
	<el-cascader 
		ref="cascader" 
		v-model="ruleForm.address" 
		:props="props">
	</el-cascader>
</template>
<script>
	export default {
   
		data(){
   
			return {
   
				ruleForm:{
   
					address:[