refine i18n demo

src/views/i18n-demo/index.vue

@@ -20,13 +20,13 @@
           <el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date"/>
         </div>
         <div class="block">
-          <el-pagination
+          <el-select v-model="value" :placeholder="$t('i18nView.selectPlaceholder')">
-            :current-page="currentPage"
+            <el-option
-            :page-sizes="[100, 200, 300, 400]"
+              v-for="item in options"
-            :page-size="100"
+              :key="item.value"
-            :total="400"
+              :label="item.label"
-            background
+              :value="item.value"/>
-            layout="total, sizes, prev, pager, next"/>
+          </el-select>
         </div>
         <div class="block">
           <el-button class="item-btn" size="small">{{ $t('i18nView.default') }}</el-button>
@@ -57,7 +57,6 @@ export default {
   data() {
     return {
       date: '',
-      currentPage: 5,
       tableData: [{
         date: '2016-05-03',
         name: 'Tom',
@@ -77,7 +76,9 @@ export default {
         date: '2016-05-01',
         name: 'Tom',
         address: 'No. 189, Grove St, Los Angeles'
-      }]
+      }],
+      options: [],
+      value: ''
     }
   },
   computed: {
@@ -91,11 +92,35 @@ export default {
       }
     }
   },
+  watch: {
+    lang() {
+      this.setOptions()
+    }
+  },
   created() {
     if (!this.$i18n.getLocaleMessage('en')[viewName]) {
       this.$i18n.mergeLocaleMessage('en', local.en)
       this.$i18n.mergeLocaleMessage('zh', local.zh)
     }
+    this.setOptions() // set default select options
+  },
+  methods: {
+    setOptions() {
+      this.options = [
+        {
+          value: '1',
+          label: this.$t('i18nView.one')
+        },
+        {
+          value: '2',
+          label: this.$t('i18nView.two')
+        },
+        {
+          value: '3',
+          label: this.$t('i18nView.three')
+        }
+      ]
+    }
   }
 }
 </script>

src/views/i18n-demo/local.js

@@ -5,6 +5,7 @@ export default {
       title: '切换语言',
       note: '本项目国际化基于 vue-i18n',
       datePlaceholder: '请选择日期',
+      selectPlaceholder: '请选择',
       tableDate: '日期',
       tableName: '姓名',
       tableAddress: '地址',
@@ -13,15 +14,18 @@ export default {
       success: '成功按钮',
       info: '信息按钮',
       warning: '警告按钮',
-      danger: '危险按钮'
+      danger: '危险按钮',
+      one: '一',
+      two: '二',
+      three: '三'
     }
-
   },
   en: {
     i18nView: {
       title: 'Switch Language',
       note: 'The internationalization of this project is based on vue-i18n',
       datePlaceholder: 'Pick a day',
+      selectPlaceholder: 'Select',
       tableDate: 'tableDate',
       tableName: 'tableName',
       tableAddress: 'tableAddress',
@@ -30,7 +34,10 @@ export default {
       success: 'success',
       info: 'info',
       warning: 'warning',
-      danger: 'danger'
+      danger: 'danger',
+      one: 'One',
+      two: 'Two',
+      three: 'Three'
     }
   }
 }