cmanager/src/components/city-cascader/main.vue

<template>
  <el-cascader
    :options="area.data"
    :show-all-levels="showAllLevels"
    v-model="model"
    :filterable="filterable"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
  ></el-cascader>
</template>

<script>
import { mapGetters } from "vuex";

function getProv(code) {
  return code.substring(0, 2) + "0000";
}
function getCity(code) {
  return code.substring(0, 4) + "00";
}

export default {
  props: {
    value: String,
    filterable: Boolean,
    placeholder: String,
    showAllLevels: { type: Boolean, default: true },
    disabled: Boolean,
    clearable: Boolean,
  },
  data() {
    return {
      options: [],
    };
  },
  created() {
    this.$store.dispatch("InitArea");
  },
  watch: {},
  computed: {
    ...mapGetters(["area"]),
    prov() {
      if (this.county) {
        return getProv(this.county);
      } else {
        return "";
      }
    },
    city() {
      if (this.county) {
        return getCity(this.county);
      } else {
        return "";
      }
    },
    county: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    model: {
      set(val) {
        if (val.length > 2) {
          this.county = val[2];
        } else {
          this.county = undefined;
        }
      },
      get() {
        if (this.county) {
          return [this.prov, this.city, this.county];
        }
        return null;
      },
    },
  },
};
</script>

<style>
</style>