vue element ui 使用el-cascader實現城市選擇
阿新 • • 發佈:2022-12-03
安裝依賴
cnpm install element-china-area-data -S
說明
provinceAndCityData是省市二級聯動資料(不帶“全部”選項)
regionData是省市區三級聯動資料(不帶“全部”選項)
provinceAndCityDataPlus是省市區三級聯動資料(帶“全部”選項)
regionDataPlus是省市區三級聯動資料(帶“全部”選項)
"全部"選項繫結的value是空字串""
CodeToText是個大物件,屬性是區域碼,屬性值是漢字 用法例如:CodeToText['110000']輸出北京市
TextToCode是個大物件,屬性是漢字,屬性值是區域碼 用法例如:TextToCode['北京市'].code輸出110000,TextToCode['北京市']['市轄區'].code輸出110100,TextToCode['北京市']['市轄區']['朝陽區'].code輸出110105
省市區三級聯動(不帶“全部”選項)
<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>
省市區三級聯動(帶“全部”選項)
<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>
省市二級聯動(帶“全部”選項):
<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>
省市二級聯動(不帶“全部”選項)
<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>