基于vue+element的省市区（默认二级）三级下拉选择框组件

组件代码：组件命名随意，暂定regional-selection

<template>
  <div>
    <el-cascader
    :value="value"
    :options="options"
    :placeholder="placeholder"
    style="width:100%"
    size="small"
    clearable
    @change="handleChange">
    </el-cascader>
  </div>
</template>

<script>
// import adress from './adress.json'
// import secondAdress from './secondAdress.json'
// import address from './response.json'
import { getLabelList } from './api.js'
export default {
  /*
      type:two =>2级 ;three =>3级
  */
  name: 'areaSelect',
  props: {
    type: { type:String, default:'two' },
    placeholder: { type:String, default:'请选择' },
    value: { type:Array }
  },
  data () {
      return {
      options:[],
    }
  },
  async created () {
    let res= await getLabelList()
    console.log(res)
    let address = res.data.data
    if(this.type === 'two'){
      address.forEach(item=>{        
        if(item.hasChildren){
          item.children.forEach(index=>{
              delete index.children
          })
        }
        this.options.push(item)
      })
    }
    else {
      address.forEach(item=>{        
        if(item.hasChildren){
          item.children.forEach(index=>{
              if(index.hasChildren){
                index.children.forEach(chil=>{
                  delete chil.children
                })
              }
          })
        }
        this.options.push(item)
      })
      // this.options = address
    }
},
  methods: {
    handleChange(value){
      // console.log(value)
      this.$emit('change',value)
      this.$emit('input',value)
    }
  }
}
</script>

<style lang='scss' scoped>
</style>

main.js中全局注册：全局组件areaSelect

// 地区二级 三级联动选择
import areaSelect from './components/regional-selection'
Vue.component('areaSelect',areaSelect)

页面中使用

<div v-if="fenceTypeShow">
    <el-form-item label="行政区域：" prop="areaList">
        <area-select
            v-model="form.areaList"
            placeholder=""
            style="width: 240px;"
            type ='three'
            @change="fenceSelChange"
        />
    </el-form-item>
</div>