added vietnamese; translated all for vi.js; added translation variables in 'example/table/*, Tab, Excel, Zip, i18n'

src/views/example/tab/components/tabPane.vue

@@ -1,45 +1,45 @@
 <template>
   <el-table :data="list" border fit highlight-current-row style="width: 100%">
 
-    <el-table-column align="center" label="ID" width="65"  v-loading="loading"
+    <el-table-column align="center" :label="$t('table.id')" width="65"  v-loading="loading"
     element-loading-text="请给我点时间！">
       <template slot-scope="scope">
         <span>{{scope.row.id}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column width="180px" align="center" label="Date">
+    <el-table-column width="180px" align="center" :label="$t('table.date')">
       <template slot-scope="scope">
         <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column min-width="300px" label="Title">
+    <el-table-column min-width="300px" :label="$t('table.title')">
       <template slot-scope="scope">
         <span>{{scope.row.title}}</span>
         <el-tag>{{scope.row.type}}</el-tag>
       </template>
     </el-table-column>
 
-    <el-table-column width="110px" align="center" label="Author">
+    <el-table-column width="110px" align="center" :label="$t('table.author')">
       <template slot-scope="scope">
         <span>{{scope.row.author}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column width="120px" label="Importance">
+    <el-table-column width="120px" :label="$t('table.importance')">
       <template slot-scope="scope">
         <svg-icon v-for="n in +scope.row.importance" icon-class="star" :key="n"></svg-icon>
       </template>
     </el-table-column>
 
-    <el-table-column align="center" label="Readings" width="95">
+    <el-table-column align="center" :label="$t('table.readings')" width="95">
       <template slot-scope="scope">
         <span>{{scope.row.pageviews}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column class-name="status-col" label="Status" width="110">
+    <el-table-column class-name="status-col" :label="$t('table.status')" width="110">
       <template slot-scope="scope">
         <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
       </template>

src/views/example/tab/index.vue

@@ -23,6 +23,7 @@ export default {
         { label: 'China', key: 'CN' },
         { label: 'USA', key: 'US' },
         { label: 'Japan', key: 'JP' },
+        { label: 'Vietnamese', key: 'VI' },
         { label: 'Eurozone', key: 'EU' }
       ],
       activeName: 'CN',

src/views/example/table/complexTable.vue

@@ -142,6 +142,7 @@ const calendarTypeOptions = [
   { key: 'CN', display_name: 'China' },
   { key: 'US', display_name: 'USA' },
   { key: 'JP', display_name: 'Japan' },
+  { key: 'VI', display_name: 'Vietnamese' },
   { key: 'EU', display_name: 'Eurozone' }
 ]
 

src/views/example/table/dragTable.vue

@@ -3,43 +3,43 @@
     <!-- Note that row-key is necessary to get a correct row order. -->
     <el-table :data="list" row-key="id"  v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
 
-      <el-table-column align="center" label="ID" width="65">
+      <el-table-column align="center" :label="$t('table.id')" width="65">
         <template slot-scope="scope">
           <span>{{scope.row.id}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="180px" align="center" label="Date">
+      <el-table-column width="180px" align="center" :label="$t('table.date')">
         <template slot-scope="scope">
           <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column min-width="300px" label="Title">
+      <el-table-column min-width="300px" :label="$t('table.title')">
         <template slot-scope="scope">
           <span>{{scope.row.title}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="110px" align="center" label="Author">
+      <el-table-column width="110px" align="center" :label="$t('table.author')">
         <template slot-scope="scope">
           <span>{{scope.row.author}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="100px" label="Importance">
+      <el-table-column width="100px" :label="$t('table.importance')">
         <template slot-scope="scope">
           <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="icon-star" :key="n"></svg-icon>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Readings" width="95">
+      <el-table-column align="center" :label="$t('table.readings')" width="95">
         <template slot-scope="scope">
           <span>{{scope.row.pageviews}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="Status" width="110">
+      <el-table-column class-name="status-col" :label="$t('table.status')" width="110">
         <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
         </template>

src/views/example/table/inlineEditTable.vue

@@ -3,50 +3,50 @@
 
     <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
 
-      <el-table-column align="center" label="ID" width="80">
+      <el-table-column align="center" :label="$t('table.id')" width="80">
         <template slot-scope="scope">
           <span>{{scope.row.id}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="180px" align="center" label="Date">
+      <el-table-column width="180px" align="center" :label="$t('table.date')">
         <template slot-scope="scope">
           <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="120px" align="center" label="Author">
+      <el-table-column width="120px" align="center" :label="$t('table.author')">
         <template slot-scope="scope">
           <span>{{scope.row.author}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="100px" label="Importance">
+      <el-table-column width="100px" :label="$t('table.importance')">
         <template slot-scope="scope">
           <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="Status" width="110">
+      <el-table-column class-name="status-col" :label="$t('table.status')" width="110">
         <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
         </template>
       </el-table-column>
 
-      <el-table-column min-width="300px" label="Title">
+      <el-table-column min-width="300px" :label="$t('table.title')">
         <template slot-scope="scope">
           <template v-if="scope.row.edit">
             <el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
-            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
+            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">{{$t('table.cancel')}}</el-button>
           </template>
           <span v-else>{{ scope.row.title }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Actions" width="120">
+      <el-table-column align="center" :label="$t('table.actions')" width="120">
         <template slot-scope="scope">
           <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">Ok</el-button>
-          <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">Edit</el-button>
+          <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">{{$t('table.edit')}}</el-button>
         </template>
       </el-table-column>
 

src/views/excel/exportExcel.vue

@@ -4,27 +4,27 @@
     <el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
-      <el-table-column align="center" label='Id' width="95">
+      <el-table-column align="center" :label="$t('table.id')" width="95">
         <template slot-scope="scope">
           {{scope.$index}}
         </template>
       </el-table-column>
-      <el-table-column label="Title">
+      <el-table-column :label="$t('table.title')">
         <template slot-scope="scope">
           {{scope.row.title}}
         </template>
       </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
+      <el-table-column :label="$t('table.author')" width="110" align="center">
         <template slot-scope="scope">
           <el-tag>{{scope.row.author}}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
+      <el-table-column :label="$t('table.readings')" width="115" align="center">
         <template slot-scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="Date" width="220">
+      <el-table-column align="center" :label="$t('table.date')" width="220">
         <template slot-scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>

src/views/excel/selectExcel.vue

@@ -6,27 +6,27 @@
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
       ref="multipleTable">
       <el-table-column type="selection" align="center"></el-table-column>
-      <el-table-column align="center" label='Id' width="95">
+      <el-table-column align="center" :label="$t('table.id')" width="95">
         <template slot-scope="scope">
           {{scope.$index}}
         </template>
       </el-table-column>
-      <el-table-column label="Title">
+      <el-table-column :label="$t('table.title')">
         <template slot-scope="scope">
           {{scope.row.title}}
         </template>
       </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
+      <el-table-column :label="$t('table.author')" width="110" align="center">
         <template slot-scope="scope">
           <el-tag>{{scope.row.author}}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
+      <el-table-column :label="$t('table.readings')" width="115" align="center">
         <template slot-scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="PDate" width="220">
+      <el-table-column align="center" :label="$t('table.date')" width="220">
         <template slot-scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.display_time}}</span>

src/views/i18n-demo/index.vue

@@ -9,6 +9,7 @@
         <el-radio-group v-model="lang" size="small">
           <el-radio label="zh" border>简体中文</el-radio>
           <el-radio label="en" border>English</el-radio>
+          <el-radio label="vi" border>Tiếng Việt</el-radio>
         </el-radio-group>
         <el-tag style='margin-top:15px;display:block;' type="info">{{$t('i18nView.note')}}</el-tag>
       </div>
@@ -80,6 +81,7 @@ export default {
     if (!this.$i18n.getLocaleMessage('en')[viewName]) {
       this.$i18n.mergeLocaleMessage('en', local.en)
       this.$i18n.mergeLocaleMessage('zh', local.zh)
+      this.$i18n.mergeLocaleMessage('vi', local.vi)
     }
   },
   computed: {

src/views/i18n-demo/local.js

@@ -25,12 +25,28 @@ export default {
       tableDate: 'tableDate',
       tableName: 'tableName',
       tableAddress: 'tableAddress',
-      default: 'default:',
+      default: 'default',
       primary: 'primary',
       success: 'success',
       info: 'info',
       warning: 'warning',
       danger: 'danger'
     }
+  },
+  vi: {
+    i18nView: {
+      title: 'Đổi Ngôn Ngữ',
+      note: 'Hiện tại chỉ dịch với i18n cho trang, sidebar và levelbar. Xin hãy chờ đợi ...',
+      datePlaceholder: 'Chọn ngày',
+      tableDate: 'Ngày giờ',
+      tableName: 'Tên',
+      tableAddress: 'Địa chỉ',
+      default: 'mặc định',
+      primary: 'chính',
+      success: 'thành công',
+      info: 'thông tin',
+      warning: 'cảnh báo',
+      danger: 'nguy hiểm'
+    }
   }
 }

src/views/zip/index.vue

@@ -4,27 +4,27 @@
     <el-input style='width:300px;' :placeholder="$t('zip.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('zip.export')}} zip</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
-      <el-table-column align="center" label='ID' width="95">
+      <el-table-column align="center" :label="$t('table.id')" width="95">
         <template slot-scope="scope">
           {{scope.$index}}
         </template>
       </el-table-column>
-      <el-table-column label="Title">
+      <el-table-column :label="$t('table.title')">
         <template slot-scope="scope">
           {{scope.row.title}}
         </template>
       </el-table-column>
-      <el-table-column label="Author" width="95" align="center">
+      <el-table-column :label="$t('table.author')" width="95" align="center">
         <template slot-scope="scope">
           <el-tag>{{scope.row.author}}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
+      <el-table-column :label="$t('table.readings')" width="115" align="center">
         <template slot-scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="Date" width="220">
+      <el-table-column align="center" :label="$t('table.date')" width="220">
         <template slot-scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.display_time}}</span>