2.vue中element-china-area-data依赖和element-plus级联选择器构建省市区三级联动

vue中element-china-area-data依赖和element-plus级联选择器构建省市区三级联动

效果
2.vue中element-china-area-data依赖和element-plus级联选择器构建省市区三级联动_第1张图片

1.vue安装element-china-area-data

npm install element-china-area-data -S

引入依赖:

import {
    regionData, CodeToText } from 'element-china-area-data'

2.elementplus级联选择器

<el-cascader>el-cascader>

3.代码:

<template>
	<div>
		<h1>三级联动和级联选择器的使用h1>
		<el-cascader  :options='options' v-model='selectedOptions' @change='addressChange'>el-cascader>
	div>
template>
<script>
	import {
      regionData, CodeToText } from 'element-china-area-data'
	export default {
     
	  name: 'addaddress',
	  data(){
     
	    return{
     
	       options: regionData,//不带‘全部’的三级联动
	       //selectedOptions: "请选择",//或者写字符串,不影响数组格式。
		   selectedOptions:

你可能感兴趣的:(#,vue3插件,vue.js,前端,elementchinaar,element-plus,地址省市区三级联动)