初始化项目

src/components/city-cascader/main.vue

@@ -0,0 +1,85 @@
+<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>