components: 新增省市区选择

package.json

@@ -11,7 +11,10 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "china-area-data": "^5.0.1",
     "element-ui": "^2.15.5",
+    "install": "^0.13.0",
+    "npm": "^8.1.1",
     "query-string": "^7.0.1",
     "vue": "^2.6.14",
     "vue-router": "^3.5.2",

src/components/base/AppArea.vue

+<template>
+  <el-cascader :options="options" :props="props" clearable v-bind="$attrs" v-on="$listeners"></el-cascader>
+</template>
+
+<script>
+import chinaAreaData from 'china-area-data'
+
+const AreaTreeData = listToTree(codeToList('86', chinaAreaData), chinaAreaData)
+
+function listToTree(list, data) {
+  return list.map(item => {
+    const items = codeToList(item.code, data)
+    if (items.length) {
+      item.children = listToTree(items, data)
+    }
+    return item
+  })
+}
+function codeToList(code, data) {
+  const results = []
+  const item = data[code]
+  for (const code in item) {
+    results.push({ code, name: item[code] })
+  }
+  return results
+}
+
+export default {
+  props: {
+    props: {
+      type: Object,
+      default() {
+        return { label: 'name', value: 'name', expandTrigger: 'hover' }
+      }
+    }
+  },
+  data() {
+    return {
+      options: AreaTreeData
+    }
+  }
+}
+</script>