element-china-area-data dependency and element-plus cascade selector in vue to build three-level linkage of provinces and cities
Effect :
1. vue unso element-china-area-data
npm install element-china-area-data -S
Import dependencies:
import {
regionData, CodeToText } from 'element-china-area-data'
2. elementplus cascade selector
<el-cascader></el-cascader>
3. Code:
<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:['110000', '110100', '110101'] //这里给一个默认省市区
}
},
methods:{
addressChange (arr) {
// console.log(this.selectedOptions) // Proxy {0: '120000', 1: '120100', 2: '120101'}
// console.log(arr) // Proxy {0: '120000', 1: '120100', 2: '120101'} 和上句一样
var addressText=CodeToText[arr[0]]+CodeToText[arr[1]]+CodeToText[arr[2]]
console.log(addressText) // addressText为el-cascader的值 北京市 市辖区 朝阳区
}
}
}
</script>
<style scoped>
</style>
4. Practical application
Because the three-level linkage of provinces and cities is not used alone, it must be used as part of the address in a form carrying user information as a function of selecting provinces and cities in the address.
For example like this:
<template>
<div>
<!-- 添加地址表单 -->
<el-form ref="add_address" :model="add_address" label-width="120px">
<h5>{
{add_address.title}}</h5>
<el-form-item label="姓名" prop="name">
<el-input v-model="add_address.name" ></el-input>
</el-form-item>
<el-form-item label="电话" prop="tel">
<el-input v-model="add_address.tel" ></el-input>
</el-form-item>
<!--1. 三级联动放在表单项里面 -->
<el-form-item label="省市区" prop="selectedOptions">
<el-cascader :options='options' v-model='add_address.selectedOptions' @change='addressChange'></el-cascader>
</el-form-item>
<!--2. 省市区下的详细地址另写一个变量表示 -->
<el-form-item label="详细地址" prop="detailaddress">
<el-input v-model="add_address.detailaddress" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button @click="clear('add_address')">取消</el-button>
</el-form-item>
<!--5. 展示省市区+详细地址： -->
展示省市区+详细地址：
{
{ addressText}}{
{detailaddress}}
</el-form>
</div>
</template>
<script>
// 引入表单
import {
reactive } from 'vue'
//引入省市区
import {
regionData, CodeToText } from 'element-china-area-data'
export default{
name:"addresslist",
data(){
return{
address_list:[],
add_address:{
title:'添加地址',
name:'',
tel:'',
//3.selectedOptions放进表单对象
selectedOptions:['110000', '110100', '110101'],
addressText:'北京市市辖区东城区', //4.1省市区的文字，另设addressText通过函数赋值得到。selectedOptions只能在它本身的框中展示，不能作为文字展示变量。
detailaddress:'',
},
options: regionData,
}
},
methods:{
//4.2省市区的文字 函数 得到省市区的文字赋值给data的add_address.addressText
addressChange (arr) {
// 此句为el-cascader的值
var addressText=CodeToText[arr[0]]+CodeToText[arr[1]]+CodeToText[arr[2]]
console.log(addressText)
this.add_address.addressText=addressText
},
}
}
</script>