Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)el-select組件的示例代碼
一 自定義組件
1 位置
2 代碼
<template> <div class="areaSelect flex"> <!-- 省選擇框 --> <el-select filterable :disabled="disabled" v-model="province" :size="size" placeholder="省" @change="changeCode($event,0)"> <el-option v-for="item in provinceList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <!-- 市選擇框 --> <el-select filterable :disabled="disabled" class="center_select" v-model="city" placeholder="市" @change="changeCode($event,1)"> <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <!-- 區(qū)選擇框 --> <el-select filterable :disabled="disabled" v-model="area" placeholder="區(qū)" @change="changeCode($event,2)"> <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </template> <script> export default { name: 'regionSelect', props: { size: '', disabled: { size: String, type: Boolean, default: false }, code: { type: Object, default: () => { return { areaCode: '', areaName: '', cityCode: '', cityName: '', provinceCode: '', provinceName: '' } } } }, data () { return { province: '', city: '', area: '', provinceList: [], cityList: [], areaList: [] } }, watch: { code (val) { if (val.areaName && val.areaName !== '') { this.province = val.provinceCode this.city = val.cityCode this.area = val.areaCode this.provinceCity(val.provinceCode) this.cityArea(val.cityCode) } else { this.cityList = [] this.areaList = [] } } }, mounted () { if (this.code.areaName && this.code.areaName !== '') { this.province = this.code.provinceCode this.city = this.code.cityCode this.area = this.code.areaCode this.provinceCity(this.code.provinceCode) this.cityArea(this.code.cityCode) } this.getProvince() }, methods: { resetArea () { this.province = '' this.city = '' this.area = '' }, // 當(dāng) type == 0 ,data 表示省編碼 // 當(dāng) type == 1 ,data 表示市編碼 changeCode (data, type) { if (type === 0) { this.city = '' this.area = '' this.provinceCity(data) } if (type === 1) { this.area = '' this.cityArea(data) } if (this.province !== '' && this.city !== '' && this.area !== '') { this.$emit( 'code', [{ code: this.province, name: this.provinceList.find( (val) => val.value === this.province ).label }, { code: this.city, name: this.cityList.find( (val) => val.value === this.city ).label }, { code: this.area, name: this.areaList.find( (val) => val.value === this.area ).label }] ) } }, // 從后臺(tái)獲得省數(shù)據(jù)列表 async getProvince () { let result = [] let url = '/base/division/provinceList' let data = await this.$http.get(url) data.data.data.map((item) => { result.push({ label: item.name, value: item.code }) }) this.provinceList = result }, // 依據(jù)省編碼獲得市數(shù)據(jù)列表 async provinceCity (code) { let result = [] let url = '/base/division/cityList' let data = await this.$http({ url: url, method: 'get', params: { provinceCode: code } }) data.data.data.map((item) => { result.push({ label: item.name, value: item.code }) }) this.cityList = result }, // 依據(jù)市編碼獲得區(qū)數(shù)據(jù)列表 async cityArea (code) { let url = '/base/division/districtList' let data = await this.$http({ url: url, method: 'get', params: { cityCode: code } }) let result = [] data.data.data.map((item) => { result.push({ label: item.name, value: item.code }) }) this.areaList = result } } } </script> <style> .center_select { margin: 0 10px; } .global_form .areaSelect { width: 70%; } .global_form .areaSelect .el-select { width: 33.33%; } </style>
二 main.js 配置
// 行政區(qū)劃三級(jí)選擇 import RegionSelect from './components/regionSelect' // 行政區(qū)劃三級(jí)選擇 Vue.use(RegionSelect) // 行政區(qū)劃三級(jí)選擇 Vue.component('regionSelect', RegionSelect)
三 使用方法
1 結(jié)構(gòu)部分
<regionSelect :code="item.value" :disabled="item.disabled" :size="layout.size" @code="changeCode($event,item.prop)" v-if="item.type==='region'" ref="selectArea" ></regionSelect>
2 代碼部分
searchForm: { province: '', // 省 city: '', // 市 district: '' // 區(qū) }, item: { // 省市區(qū) select 自定義組件傳參部分 value: '', type: 'region', disabled: false }, layout: { // 選擇框樣式,用于傳參 size: '' },
3 樣式部分
// 省市區(qū)選擇框改變時(shí),傳遞出來(lái)已選擇的值 changeCode (data, prop) { this.searchForm.province = data[0].name this.searchForm.city = data[1].name this.searchForm.district = data[2].name }, // 重置選擇框 resetForm () { this.$refs.selectArea[0].resetArea() // 清除省市區(qū) }
四 測(cè)試
1 級(jí)聯(lián)選擇
2 觀察數(shù)據(jù)
到此這篇關(guān)于Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)el-select組件的示例代碼的文章就介紹到這了,更多相關(guān)Vue省市區(qū)三級(jí)聯(lián)動(dòng)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作
這篇文章主要介紹了antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10vue動(dòng)態(tài)禁用控件綁定disable的例子
今天小編就為大家分享一篇vue動(dòng)態(tài)禁用控件綁定disable的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10Vue?3?中使用?vue-router?進(jìn)行導(dǎo)航與監(jiān)聽(tīng)路由變化的操作
在Vue3中,通過(guò)useRouter和useRoute可以方便地實(shí)現(xiàn)頁(yè)面導(dǎo)航和路由變化監(jiān)聽(tīng),useRouter允許進(jìn)行頁(yè)面跳轉(zhuǎn),而useRoute結(jié)合watch可以根據(jù)路由變化更新組件狀態(tài),這些功能為Vue3應(yīng)用增加了靈活性和響應(yīng)性,使得路由管理更加高效2024-09-09vue使用async/await來(lái)實(shí)現(xiàn)同步和異步的案例分享
近期項(xiàng)目中大量使用async,從服務(wù)器獲取數(shù)據(jù),解決一些并發(fā)傳參問(wèn)題,代碼很簡(jiǎn)單,在此也看了一些博客,現(xiàn)在async/await已經(jīng)大范圍讓使用,所以本文給大家介紹一下vue使用async/await來(lái)實(shí)現(xiàn)同步和異步的案例,需要的朋友可以參考下2024-01-01結(jié)合axios對(duì)項(xiàng)目中的api請(qǐng)求進(jìn)行封裝操作
這篇文章主要介紹了結(jié)合axios對(duì)項(xiàng)目中的api請(qǐng)求進(jìn)行封裝操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09