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