boss/components/form/area_select.vue

<template>
  <div>
    <el-cascader
      v-model="val"
      @change="handleChange"
      :options="list"></el-cascader>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list:[],
        val:0,
      }
    },
    computed: {

    },
    mounted() {
      this.getOptions();
    },
    methods: {
      handleChange(value) {
        this.$emit('input', value)
      },
      async getOptions() {
        let res = await this.$post("/api/recruit/getOptions");
        if (res && res.status === 1) {
          this.options = res.data || [];
        }
        this.getAreas();
      },
      getAreas() {
        let provinces = this.options.provinces;
        let cities = this.options.cities;
        let data = [];
        let id, dd, c;
        for (let i = 0; i < provinces.length; i++) {
          id = provinces[i].id;
          let arr = {
            value: id,
            label: provinces[i].name,
            children: (function () {
              c = 0;
              dd = [];
              for (let j = 0; j < cities.length; j++) {
                if (cities[j].prov_id == id) {
                  let arr1 = {
                    value: cities[j].id,
                    label: cities[j].name
                  };
                  dd[c] = arr1;
                  c++;
                }
              }
              return dd;
            })()
          };
          data[i] = arr;
        }
        this.list = data;
      },
    }
  };
</script>