Element UI 省市區級聯資料

2021-10-05 08:19:50 字數 1130 閱讀 2406

前端工作過程中難免會要用到選擇位址的時候,除了從後台獲取特定地區資料的情況外,一般都是全國的省市區提供給使用者選擇,element ui 提供了乙個很好的外掛程式。

element ui 中國省市區級聯資料

1.安裝(使用 npm)

npm install element-china-area-data -s

2.引入

import from 『element-china-area-data』

3.tips

專案value

provinceandcitydata

是省市二級聯動資料(不帶「全部」選項

regiondata

是省市區**聯動資料(不帶「全部」選項)

provinceandcitydataplus

是省市區**聯動資料(帶「全部」選項)

regiondataplus

是省市區**聯動資料(帶「全部」選項)

codetotext是個大物件

屬性是區域碼,屬性值是漢字 用法例如:codetotext[『110000』]輸出北京市

texttocode是個大物件

屬性是漢字,屬性值是區域碼 用法例如:texttocode[『北京市』].code輸出110000,texttocode[『北京市』][『市轄區』].code輸出110100,texttocode[『北京市』][『市轄區』][『朝陽區』].code輸出110105

"全部"選項繫結的value

是空字串""

6.頁面使用

>

"large"

:options=

"options" v-model=

"selectedoptions" @change=

"handlechange"

>

<

/el-cascader>

<

/div>

<

/template>

import

from

'element-china-area-data'

export

default},

methods:}}

<

/script>

Element UI 中國省市區級聯資料

npm install element china area data s位址在此,網頁開啟會比較慢 import from element china area data provinceandcitydata是省市二級聯動資料 不帶 全部 選項 regiondata是省市區 聯動資料 不帶 全部...

Element UI級聯位址省市區外掛程式

npm install element china area data simport from element china area data import from element china area data provinceandcitydata 是省市二級聯動資料 不帶 全部 選項 re...

省市區城市級聯

約定 省市區 城市聯動效果,選擇框預設全部顯示,選擇後根據實際情況顯示或隱藏。在省得select上加上屬性 load data 330102 即表示頁面需把330102這個對應的相關select做相應選中。json資料結構 城市編碼6位 每2位表示一級 城市層級,上一級編碼,城市名稱,其他根據業務實...