VUE3.0学习系列随笔(十):省市区选择组件
VUE3.0学习系列随笔(十):省市区选择组件1、数据来源使用的依赖数据为:element-china-area-data,总共有六种数据模式详情请参考官网为:https://www.npmjs.com/package/element-china-area-data(1)命令行窗口安装依赖,命令为:npm install element-china-area-data -S(2)Vue3.0 UI
·
VUE3.0学习系列随笔(十):省市区选择组件
1、数据来源
使用的依赖数据为:element-china-area-data
,总共有六种数据模式
详情请参考官网为:https://www.npmjs.com/package/element-china-area-data
(1)命令行窗口安装依赖,命令为:
npm install element-china-area-data -S
(2)Vue3.0 UI管理界面安装:
数据格式为:
2、采用ElementUI-plus实现
(1)采用el-cascader级联选择器实现省市区的选择,效果为:
(2)实现代码为:
<template>
<div>
<el-cascader size='large' :options='options' v-model='selectedOptions' @change='addressChange'></el-cascader>
</div>
</template>
<script>
import { regionData, CodeToText } from 'element-china-area-data'
export default {
name: 'Region',
data () {
return {
options: regionData,
selectedOptions: ['110000', '110100', '110101']
}
},
methods: {
addressChange (arr) {
console.log(this.selectedOptions)
console.log(arr)
console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]])
}
}
}
</script>
3、使用自定义组件实现
(1)采用自定义CSS样式实现省市区三级区域选择,可以实时监控选择数据,并将Vue文件封装为自定义组件,效果为:
(2)自定义省市区组件代码,可以参考资源:https://download.csdn.net/download/qq_26666947/15077784
(3)下载组件文件,在Vue3.0项目中components文件夹下,组件采用v-model进行数据双向绑定,因此可以向普通组件一样进行局部引用,代码为:
<template>
<div class='about'>
<region-select v-model='region'></region-select>
</div>
</template>
<script>
import RegionSelect from '@/components/RegionSelect.vue'
export default {
name: 'About',
components: {
RegionSelect
},
data () {
return {
region: String
}
},
watch: {
region () {
console.log(this.region)
}
}
}
</script>
每次选择的省市区值为:region,结果可以在控制台进行查看:
更多推荐
已为社区贡献17条内容
所有评论(0)