add cityCascader

src/components/CityCascader/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <el-form>
+      <el-form-item label="城市三级联动选择">
+        <el-cascader
+          :options="city"
+          @change="selctCity"
+        />
+      </el-form-item>
+    </el-form>
+
+  </div>
+</template>
+
+<script>
+import { city } from './city'
+// 如果城市数据有误，可以直接更改，城市数据来自网络
+export default {
+  data() {
+    return {
+      city: []
+    }
+  },
+  mounted() {
+    this.city = city
+  },
+  methods: {
+    selctCity(val) {
+      console.log(val)
+      this.$message({
+        message: '所选城市编码：' + val,
+        type: 'success'
+      })
+    }
+  }
+}
+</script>

src/lang/en.js

@@ -101,7 +101,9 @@ export default {
     stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
     backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
     backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
-    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
+    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.',
+    cityCascaderTips: 'Directly reference element cascader cascade select components, options parameters using the component directory city. Js'
+
   },
   table: {
     dynamicTips1: 'Fixed header, sorted by header order',

src/lang/zh.js

@@ -24,6 +24,7 @@ export default {
     dragDialog: '拖拽 Dialog',
     dragSelect: '拖拽 Select',
     dragKanban: '可拖拽看板',
+    cityCascader: '城市联动选择',
     charts: '图表',
     keyboardChart: '键盘图表',
     lineChart: '折线图',
@@ -101,7 +102,8 @@ export default {
     stickyTips: '当页面滚动到预设的位置会吸附在顶部',
     backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
     backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
-    imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'
+    imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。',
+    cityCascaderTips: '直接引用element的cascader级联选择组件，options参数使用组件目录下的city.js'
   },
   table: {
     dynamicTips1: '固定表头, 按照表头顺序排序',

src/router/modules/components.js

@@ -95,6 +95,12 @@ const componentsRouter = {
       component: () => import('@/views/components-demo/dragKanban'),
       name: 'DragKanbanDemo',
       meta: { title: 'dragKanban' }
+    },
+    {
+      path: 'city-cascader',
+      component: () => import('@/views/components-demo/cityCascader'),
+      name: 'cityCascaderDemo',
+      meta: { title: 'cityCascader' }
     }
   ]
 }

src/views/components-demo/cityCascader.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="components-container">
+    <code>{{ $t('components.cityCascaderTips') }}</code>
+    <city-cascader />
+  </div>
+</template>
+
+<script>
+import CityCascader from '@/components/CityCascader'
+export default {
+  components: {
+    CityCascader
+  },
+  data() {
+    return {}
+  }
+}
+</script>