Article From:https://www.cnblogs.com/e-cat/p/9724753.html

1.Effect preview:

2.Import resource files

1.vueResources

<script src="https://unpkg.com/vue/dist/vue.js"></script>

2.elementUIResources

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3.city-data.jsResources

Address: https://github.com/Ele-Cat/Ele-Cat.github.io/edit/master/city-data.js

3.Business code

1.htmlCode

<div id="app">
  <el-cascader :options="CityInfo" v-model="form.selectedOptions" :change-on-select="true" :clearable="true" :filterable="true" @change="handleChange">
  </el-cascader>
  <span>Selected region: {form. city | myAddress City}{form. area | myAddress Area}{form. minarea | myAddress Minarea}}</span>
</div>

2.jsCode

 1     const app = new Vue({
 2       el: '#app',
 3       data: {
 4         CityInfo: CityInfo,
 5         form: {
 6           city: '',
 7           area: '',
 8           minarea: '',
 9           selectedOptions: [],//Area filter array
10         },
11       },
12       created() {
13       },
14       methods: {
15         handleChange(value) {
16           this.form.city = this.form.selectedOptions[0];
17           this.form.area = this.form.selectedOptions[1]
18           this.form.minarea = this.form.selectedOptions[2]
19         },
20    },
20 filters: { 21 myAddressCity: function (value) { 22 for (y in this.CityInfo) { 23 if (this.CityInfo[y].value == value) { 24 return value = this.CityInfo[y].label 25 } 26 } 27 }, 28 myAddressArea: function (value) { 29 for (y in this.CityInfo) { 30 for (z in this.CityInfo[y].children) { 31 if (this.CityInfo[y].children[z].value == value && value != undefined) { 32 return value = this.CityInfo[y].children[z].label; 33 } 34 } 35 } 36 }, 37 myAddressMinarea: function (value) { 38 for (y in this.CityInfo) { 39 for (z in this.CityInfo[y].children) { 40 for (i in this.CityInfo[y].children[z].children) { 41 if (this.CityInfo[y].children[z].children[i].value == value && value != undefined) { 42 return value = this.CityInfo[y].children[z].children[i].label 43 } 44 } 45 } 46 } 47 }, 48 }, 49 })

Production is complete.Other more usage reference official website: http://element-cn.eleme.io/#/zh-CN/component/cascader

 

Postscript 1: add in < el-cascader> tagexpand-trigger=“hover”The hover trigger can be implemented.

Postscript 2: deleting level third in city-data.js can achieve two level linkage between provinces and cities.

 

Leave a Reply

Your email address will not be published. Required fields are marked *