vue基于element-china-area-data插件實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)
前言
前端開(kāi)發(fā)的同學(xué)們應(yīng)該都知道，省市區(qū)聯(lián)動(dòng)在日常開(kāi)發(fā)中用的非常多，今天跟大家分享一款好用的插件 — element-china-area-data。
安裝
npm install element-china-area-data -S cnpm install element-china-area-data -S
代碼樣例
<template>
<div>
<el-cascader size="large" :options="options" v-model="provinces" @change="handleChange" placeholder="請(qǐng)選擇省市區(qū)"></el-cascader>
</div>
</template>
<script>
import { regionData } from "element-china-area-data";//引入
export default {
data() {
return {
options: regionData,//選擇格式
provinces: [], //省市區(qū)綁定數(shù)組
};
},
methods: {
// 事件觸發(fā)
handleChange(e) {
console.log(e, "所選code值");
},
},
};
</script>
element-china-area-data 插件主要分成四種展示格式：
- provinceAndCityData
- provinceAndCityDataPlus
- regionData
- regionDataPlus
以下是設(shè)置不同屬性時(shí)對(duì)應(yīng)展示的格式：
1. provinceAndCityData 是省市兩級(jí)聯(lián)動(dòng)數(shù)據(jù)且不帶 "全部" 字樣選項(xiàng)。當(dāng) options 的值為 provinceAndCityData 時(shí)，展示如下：
2. provinceAndCityDataPlus 是省市兩級(jí)聯(lián)動(dòng)數(shù)據(jù)且顯示 "全部" 字樣選項(xiàng)。當(dāng) options 的值為 provinceAndCityDataPlus 時(shí)，展示如下：
3. regionData 是省市區(qū)三級(jí)聯(lián)動(dòng)數(shù)據(jù)且不帶 "全部" 字樣選項(xiàng)。當(dāng) options 的值為 regionData 時(shí)，展示如下：
4. regionDataPlus 是省市區(qū)三級(jí)聯(lián)動(dòng)數(shù)據(jù)且顯示 "全部" 字樣選項(xiàng)。當(dāng) options 的值為 regionDataPlus 時(shí)，展示如下：
注意： 當(dāng)選擇 “全部” 字樣選項(xiàng)時(shí)，綁定的 value 值是空字符串。
案例
省市二級(jí)聯(lián)動(dòng)（不帶“全部”選項(xiàng)）:
<template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { provinceAndCityData } from 'element-china-area-data'
export default {
data () {
return {
options: provinceAndCityData,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value)
}
}
}
</script>
省市二級(jí)聯(lián)動(dòng)（帶“全部”選項(xiàng)）:
<template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { provinceAndCityDataPlus } from 'element-china-area-data'
export default {
data () {
return {
options: provinceAndCityDataPlus,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value)
}
}
}
</script>
省市三級(jí)聯(lián)動(dòng)（不帶“全部”選項(xiàng)）:
<template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { regionData } from 'element-china-area-data'
export default {
data () {
return {
options: regionData,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value)
}
}
}
</script>
省市三級(jí)聯(lián)動(dòng)（帶“全部”選項(xiàng)）:
<template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { regionDataPlus } from 'element-china-area-data'
export default {
data () {
return {
options: regionDataPlus,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value)
}
}
}
</script> 到此這篇關(guān)于vue基于element-china-area-data插件實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)的文章就介紹到這了,更多相關(guān)vue 省市區(qū)聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng)
- Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- 詳解Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- 基于Vue2實(shí)現(xiàn)簡(jiǎn)易的省市區(qū)縣三級(jí)聯(lián)動(dòng)組件效果
- 使用vue2實(shí)現(xiàn)帶地區(qū)編號(hào)和名稱的省市縣三級(jí)聯(lián)動(dòng)效果
- Vue2仿淘寶實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- vue.js模仿京東省市區(qū)三級(jí)聯(lián)動(dòng)的選擇組件實(shí)例代碼
- vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級(jí)聯(lián)動(dòng)示例(仿淘寶京東收貨地址4級(jí)聯(lián)動(dòng))
- vue省市區(qū)三聯(lián)動(dòng)下拉選擇組件的實(shí)現(xiàn)
相關(guān)文章
解決VUE中document.body.scrollTop為0的問(wèn)題
今天小編就為大家分享一篇解決VUE中document.body.scrollTop為0的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目啟動(dòng)出現(xiàn)cannot GET /服務(wù)錯(cuò)誤的解決方法
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)出現(xiàn)cannot GET /服務(wù)錯(cuò)誤的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了Vue?子組件傳父組件?$emit更新屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
自定義指令,是Vue提供的一種擴(kuò)展和定制的機(jī)制,使開(kāi)發(fā)者能夠在組件中直接操作DOM、處理事件、添加樣式等,并提供了與第三方庫(kù)集成的方式,定義指令使得Vue在處理交互和DOM操作時(shí)更加靈活和強(qiáng)大,本文將帶大家搞懂Vue中的自定義指令,需要的朋友可以參考下2023-07-07
本篇文章主要介紹了Vue.js -- 過(guò)濾器使用總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
這篇文章主要介紹了vue實(shí)現(xiàn)2048小游戲功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue3 自定義loading的操作方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
vue前端開(kāi)發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個(gè)輔助函數(shù)，所謂的輔助函數(shù)分別對(duì)State、Getters、Mutations、Actions在完成狀態(tài)的使用進(jìn)行簡(jiǎn)化2021-10-10
vue中關(guān)于_ob_:observer的處理方式
這篇文章主要介紹了vue中關(guān)于_ob_:observer的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了VUE+Element環(huán)境搭建與安裝的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01