vue 省市区插件

大家好,我是大帅子,今天给大家讲一下vue2中实现省市区的插件

点击进去插件npm地址

1.安装

npm install element-china-area-data -S

2.我们全局注册一下

/src/components/CascaderComponent/index.vue

<template>
  <div>
    <el-cascader
      :size="size"
      style="width: 100%;"
      :options="options"
      v-model="provinces"
      @change="dynamicHandleChange"
      :placeholder="placeholder"
      :parameters="parameters"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: 'small' // 默认大小为small
    },
    options: {
      type: Array,
      default: () => [] // 默认选项数据为空数组
    },
    placeholder: {
      type: String,
      default: '请选择省市区' // 默认提示文字为"请选择省市区"
    },
    parameters: {
      type: String,
      default: 'name' // 默认为code值
    },
    selectValue: String //model值
  },
  data() {
    return {
      provinces: [] // 选中的省市区数据，默认为空数组
    }
  },
  watch: {
    selectValue: {
      handler(newValue) {
        // 确保选择框中的值已经更新完成
        this.$nextTick(() => {
          console.log(this.provinces);
          this.provinces = newValue
        })
      },
      immediate: true
    }
  },
  methods: {
    dynamicHandleChange(e) {
      if (this.parameters == 'name') {
        this.$emit('change', this.ideograph(e), this.figure(e))
      } else {
        this.$emit('change', this.figure(e))
      }
    },
    // 传递中文数据
    ideograph(code) {
      const areas = []
      if (Array.isArray(code) && code.length) {
        let region = this.options
        for (let i = 0; i < code.length; i++) {
          const item = code[i]
          const found = region.find((regionItem) => regionItem.value === item)
          if (found) {
            areas.push(found.label) // 直接将中文推入数组中
            region = found.children || []
            if (i === code.length - 1) {
              // 最后一个区域，可以打印或进行其他处理
            }
          } else {
            break
          }
        }
      }
      return areas.join('/')
    },
    // 传递code数据
    figure(code) {
      return code.join('/')
    }
  }
}
</script>

3.直接使用

 <cascader-component
  :selectValue="city"
  :size="'medium'"
  :parameters="'name'"  // 显示code或者中文
  :options="regionData"
  :placeholder="'请选择城市'"
  @change="customChangeHandler"
>
</cascader-component>


import { regionData } from 'element-china-area-data'


data() {
    return {
      city: null
    }
  }
  
  
method:{
    customChangeHandler(x,y) {
      console.log(this.city,"this.city");
      
     // code形式: [1,11,123]
     // name形式: [湖北省,武汉市,江汉区]
     // 中间隔开方式如需调整,直接修改源码就行
    }
}

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!