前端处理 省市区三级联动 公共组件
1.src/components/AreaCascader/index.vue2.src/utils/area.js3.src/utils/area.json使用1.src/components/AreaCascader/index.vue
<template><el-cascader :value="data_array" :options="areaData" @change="handleChange"></el-cascader></template><script>import areaData from '@/utils/area.json'export default {name: 'AreaCascader',props: {data: {type: String || Array,default: ''}},computed: {areaData() {return areaData},// el-cascader只接受数组格式的初始化值// 检测父组件传参类型，如果为String则分割字符串，反之直接展示data_array() {return Array.isArray(this.data) ? this.data : this.data.split(',')}},methods: {handleChange(val) {this.$emit('update:change', val.join(','));}}}</script>
2.src/utils/area.js
3.src/utils/area.json
使用
<area-cascader v-if="form.field_type === 7" :data="submitForm" :change.sync="submitForm"></area-cascader>import AreaCascader from '@/components/AreaCascader/index.vue'components: {AreaCascader },submitForm: '',
这个时候的值是00，0000，000000这样的形式
需要转换areaCodeTransform，所以封装这样一个函数
src/utils下import areaData from './area.json'export function areaCodeTransform(areaCode) {const Province = areaCode.split(',')[0]const City = areaCode.split(',')[1]const District = areaCode.split(',')[2]const ProvinceObj = areaData.find(province => province.value === Province)const CityObj = ProvinceObj ? ProvinceObj.children.find(city => city.value === City) : {label: '', child: [] }const DistrictObj = CityObj ? CityObj.children.find(district => district.value === District) : {label: '' }return `${ProvinceObj.label}/${CityObj.label}/${DistrictObj.label}`}
在main.js
import {areaCodeTransform } from './utils/index'Vue.prototype.$areaCodeTransform = areaCodeTransform
使用
$areaCodeTransform(item.value)
将00，0000，000000
