Vue Element省市区关联选择

最新推荐文章于 2024-07-18 09:36:19 发布

新一coding

最新推荐文章于 2024-07-18 09:36:19 发布

阅读量1.9k

点赞数 1

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/Xin6Yang/article/details/102632710

版权

本文介绍如何在Vue项目中结合Element UI库，实现省市区三级联动选择的功能。通过引入Element组件，声明所需的变量和数据源，以及定义相关的方法，详细阐述了这一过程。

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

Element组件

<el-form>
	<el-form-item label="地址信息:" class="el-form-item">
		<el-select v-model="addressForm.province" placeholder="请选择省份" @change="updateCity" style="width: 15%;">
			<el-option
			  v-for="item in arr"
			  :key="item.name"
			  :label="item.name"
			  :value="item.name">
			</el-option>
		  </el-select>
		  <el-select v-model="addressForm.city" placeholder="请选择市区" @change="updateDistrict" style="width: 15%;margin-left: 15px;">
			<el-option
			  v-for="item in cityArr"
			  :key="item.name"
			  :label="item.name"
			  :value="item.name"
			  >
			</el-option>
		  </el-select>
		  <el-select v-model="ad