【vue】element 前端处理 省市区三级联动 公共组件

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