vue基于element-china-area-data插件實現(xiàn)省市區(qū)聯(lián)動
前言
前端開發(fā)的同學們應該都知道,省市區(qū)聯(lián)動在日常開發(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ū)"></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è)置不同屬性時對應展示的格式:
1. provinceAndCityData 是省市兩級聯(lián)動數(shù)據(jù)且不帶 "全部" 字樣選項。當 options 的值為 provinceAndCityData 時,展示如下:
2. provinceAndCityDataPlus 是省市兩級聯(lián)動數(shù)據(jù)且顯示 "全部" 字樣選項。當 options 的值為 provinceAndCityDataPlus 時,展示如下:
3. regionData 是省市區(qū)三級聯(lián)動數(shù)據(jù)且不帶 "全部" 字樣選項。當 options 的值為 regionData 時,展示如下:
4. regionDataPlus 是省市區(qū)三級聯(lián)動數(shù)據(jù)且顯示 "全部" 字樣選項。當 options 的值為 regionDataPlus 時,展示如下:
注意: 當選擇 “全部” 字樣選項時,綁定的 value 值是空字符串。
案例
省市二級聯(lián)動(不帶“全部”選項):
<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>
省市二級聯(lián)動(帶“全部”選項):
<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>
省市三級聯(lián)動(不帶“全部”選項):
<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>
省市三級聯(lián)動(帶“全部”選項):
<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插件實現(xiàn)省市區(qū)聯(lián)動的文章就介紹到這了,更多相關(guān)vue 省市區(qū)聯(lián)動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue自定義省市區(qū)三級聯(lián)動
- Vue實現(xiàn)省市區(qū)三級聯(lián)動
- 詳解Vue、element-ui、axios實現(xiàn)省市區(qū)三級聯(lián)動
- 基于Vue2實現(xiàn)簡易的省市區(qū)縣三級聯(lián)動組件效果
- 使用vue2實現(xiàn)帶地區(qū)編號和名稱的省市縣三級聯(lián)動效果
- Vue2仿淘寶實現(xiàn)省市區(qū)三級聯(lián)動
- vue.js模仿京東省市區(qū)三級聯(lián)動的選擇組件實例代碼
- vue mint-ui 實現(xiàn)省市區(qū)街道4級聯(lián)動示例(仿淘寶京東收貨地址4級聯(lián)動)
- vue省市區(qū)三聯(lián)動下拉選擇組件的實現(xiàn)
相關(guān)文章
解決VUE中document.body.scrollTop為0的問題
今天小編就為大家分享一篇解決VUE中document.body.scrollTop為0的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue項目啟動出現(xiàn)cannot GET /服務錯誤的解決方法
這篇文章主要介紹了vue項目啟動出現(xiàn)cannot GET /服務錯誤的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04vue前端開發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個輔助函數(shù),所謂的輔助函數(shù)分別對State、Getters、Mutations、Actions在完成狀態(tài)的使用進行簡化2021-10-10vue中關(guān)于_ob_:observer的處理方式
這篇文章主要介紹了vue中關(guān)于_ob_:observer的處理方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07