【Vue】使用ElementUI组件基于element-china-area-data库实现省市区三级联动的组件封装

孑然R2024-07-22 10:57

效果展示

依赖包版本

javascript 复制代码

"element-china-area-data": "^6.1.0",
"element-ui": "2.15.6",

组件代码

javascript 复制代码

// components/chinaAreaCascader/index.vue
<template>
  <el-cascader v-model="val" @change="handleChange" :options="options[type]"/>
</template>
<script>
import { provinceAndCityData,regionData,pcTextArr,pcaTextArr, codeToText} from 'element-china-area-data'
export default {
  name: 'chinaAreaCascader',
  props:{
    value:{ //双向绑定的值
      type:Array,
      default:()=>{
        return []
      }
    },
    // 选项类型
    type:{
      type:String,
      default:'regionData' //默认省市区三级联动
    }
  },
  data(){
    return {
      // 选项
      options:{
        provinceAndCityData, //provinceAndCityData省市二级联动 汉字+code
        regionData, //regionData省市区三级联动 汉字+code
        pcTextArr, //pcTextArr省市联动数据，纯汉字
        pcaTextArr, //pcaTextArr省市区联动数据，纯汉字
        codeToText, //codeToText是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText['110000']输出北京市
      },
      val:[] //当前组件的值
    }
  },
  watch:{
    value:{
      handler(newVal) {
        this.val = newVal //绑定外部组件传入的默认值
      },
      deep:true
    }
  },
  methods:{
    // 双向绑定
    handleChange(){
      console.log(this.val,'当前选择')
      this.$emit('input',this.val) //触发input事件，将当前组件的值传给外部组件
    }
  }
}
</script>

使用组件

javascript 复制代码

<template>
	<el-form-item label="活动地点" class="mb5" prop="position">
	  <china-area-cascader v-model="formData.position" type="pcaTextArr" />
	</el-form-item>
</template>
<script>
import ChinaAreaCascader from '@/components/chinaAreaCascader/index.vue'

export default {
  components: { ChinaAreaCascader },
  data() {
  	formData:{
  		position:[], //省市区位置
	}
  }
}
</script>