add tabs example

src/router/index.js

@@ -58,6 +58,7 @@ const DragTable = () => import('../views/example/table/dragTable');
 const InlineEditTable = () => import('../views/example/table/inlineEditTable');
 
 const Form = () => import('../views/example/form');
+const Tab = () => import('../views/example/tab/index');
 
 /* permission */
 const Permission = () => import('../views/permission/index');
@@ -198,7 +199,7 @@ export const asyncRouterMap = [
         path: '/table',
         component: TableLayout,
         redirect: '/table/table',
-        name: 'table',
+        name: 'Table',
         children: [
           { path: 'dynamictable', component: DynamicTable, name: '动态table' },
           { path: 'dragtable', component: DragTable, name: '拖拽table' },
@@ -206,8 +207,10 @@ export const asyncRouterMap = [
           { path: 'table', component: Table, name: '综合table' }
         ]
       },
-      { path: 'form/edit', component: Form, name: '编辑form', meta: { isEdit: true } },
-      { path: 'form/create', component: Form, name: '创建form' }
+      { path: 'form/edit', component: Form, name: '编辑Form', meta: { isEdit: true } },
+      { path: 'form/create', component: Form, name: '创建Form' },
+
+      { path: 'tab/index', component: Tab, name: 'Tab' }
     ]
   },
   { path: '*', redirect: '/404', hidden: true }

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

+<template>
+  <el-table :data="list" border fit highlight-current-row style="width: 100%">
+
+    <el-table-column align="center" label="序号" width="65">
+      <template scope="scope">
+        <span>{{scope.row.id}}</span>
+      </template>
+    </el-table-column>
+
+    <el-table-column width="180px" align="center" label="时间">
+      <template scope="scope">
+        <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
+      </template>
+    </el-table-column>
+
+    <el-table-column min-width="300px" label="标题">
+      <template scope="scope">
+        <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
+        <el-tag>{{scope.row.type}}</el-tag>
+      </template>
+    </el-table-column>
+
+    <el-table-column width="110px" align="center" label="作者">
+      <template scope="scope">
+        <span>{{scope.row.author}}</span>
+      </template>
+    </el-table-column>
+
+    <el-table-column width="80px" label="重要性">
+      <template scope="scope">
+        <wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
+      </template>
+    </el-table-column>
+
+    <el-table-column align="center" label="阅读数" width="95">
+      <template scope="scope">
+        <span>{{scope.row.pageviews}}</span>
+      </template>
+    </el-table-column>
+
+    <el-table-column class-name="status-col" label="状态" width="90">
+      <template scope="scope">
+        <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
+      </template>
+    </el-table-column>
+
+  </el-table>
+</template>
+
+<script>
+  import { fetchList } from 'api/article_table';
+
+  export default {
+    name: 'articleDetail',
+    props: {
+      type: {
+        type: String,
+        default: 'CN'
+      }
+    },
+    data() {
+      return {
+        list: null,
+        total: null,
+        listQuery: {
+          page: 1,
+          limit: 5,
+          type: this.type,
+          sort: '+id'
+        }
+      }
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger'
+        };
+        return statusMap[status]
+      }
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      getList() {
+        this.$emit('create'); // for test
+
+        fetchList(this.listQuery).then(response => {
+          this.list = response.data.items;
+          this.total = response.data.total;
+        })
+      }
+    }
+  }
+</script>
+

src/views/example/tab/index.vue

+<template>
+  <div class="tab-container">
+    <el-tag type="primary">create times ：{{createdTimes}}</el-tag>
+    <el-tabs style='margin-top:15px;' v-model="activeName" type="border-card">
+      <el-tab-pane v-for="item in tabMapOptions" :label="item.label" :key='item.key' :name="item.key">
+        <keep-alive>
+          <tab-pane v-if='activeName==item.key' :type='item.key' @create='showCreatedTimes'></tab-pane>
+        </keep-alive>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+  import tabPane from './components/tabPane'
+
+  export default {
+    name: 'tabDemo',
+    components: { tabPane },
+    data() {
+      return {
+        tabMapOptions: [
+          { label: '中国', key: 'CN' },
+          { label: '美国', key: 'US' },
+          { label: '日本', key: 'JP' },
+          { label: '欧元区', key: 'EU' }
+        ],
+        activeName: 'CN',
+        createdTimes: 0
+      }
+    },
+    methods: {
+      showCreatedTimes() {
+        this.createdTimes = this.createdTimes + 1;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .tab-container{
+    margin: 30px;
+  }
+</style>