用el-select实现三级连下拉省市区

最新推荐文章于 2024-06-20 10:00:58 发布

可爱的狗子

最新推荐文章于 2024-06-20 10:00:58 发布

阅读量1.3k

点赞数

分类专栏：前端组件设计文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43941813/article/details/106665496

版权

本文介绍如何使用Vue.js结合JavaScript实现三级联动的下拉菜单，以省市区为例，展示地区数据和查询操作的方法。

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

用el-select实现三级连下拉

以省市区三级连为例子

以省市区三级连为例子

在这里插入图片描述

<template>
	<div class="PositionSelect">
		<el-select v-model="values" value-key="areaCode" style="width:100%;" multiple filterable remote placeholder="请输入关键词"
		 :remote-method="remoteMethod" :loading="loading" @change="selectValueChange" @remove-tag="removeTag">
			<el-option v-for="item in options" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
			</el-option>
		</el-select>
	</div>
</template>

<script>
	import {
   
		queryPositionList
	} from '@/api/PositionData.js'

	export default {
   
		props: {
   
			maxLevel: {
   
				type: String,
				required: true
			},
			value: Array
		},
		data() {
   
			return {
   
				options: [],
				values: this.value,
				loading: false
			}
		},
		created() {
   
			let res =