<template> <el-table :data="list" border fit highlight-current-row style=
"width: 100%"> <el-table-column v-loading="loading" align="center" label="ID"
width="65" element-loading-text=" Please give me some time !" > <template slot-scope="scope"> <span>
{{ scope.row.id }}</span> </template> </el-table-column> <el-table-column width=
"180px" align="center" label="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"> <template
slot-scope="{row}"> <span>{{ row.title }}</span> <el-tag>{{ row.type }}</el-tag>
</template> </el-table-column> <el-table-column width="110px" align="center"
label="Author"> <template slot-scope="scope"> <span>{{ scope.row.author }}</span
> </template> </el-table-column> <el-table-column width="120px" label=
"Importance"> <template slot-scope="scope"> <svg-icon v-for="n in
+scope.row.importance" :key="n" icon-class="star" /> </template> </el-table-
column> <el-table-column align="center" label="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"> <template slot-scope="{row}"> <el-tag :type="row.status | statusFilter">
{{ row.status }} </el-tag> </template> </el-table-column> </el-table> </template
> <script> import { fetchList } from '@/api/article' export default { filters: {
statusFilter(status) { const statusMap = { published: 'success', draft: 'info',
deleted: 'danger' } return statusMap[status] } }, props: { type: { type: String,
default: 'CN' } }, data() { return { list: null, listQuery: { page: 1, limit: 5,
type: this.type, sort: '+id' }, loading: false } }, created() { this.getList()
}, methods: { getList() { this.loading = true this.$emit('create') // for test
fetchList(this.listQuery).then(response => { this.list = response.data.items
this.loading = false }) } } } </script> <template> <div class="tab-container"> <
el-tag>mounted times ：{{ createdTimes }}</el-tag> <el-alert :closable="false"
style="width:200px;display:inline-block;vertical-align:
middle;margin-left:30px;" title="Tab with keep-alive" type="success" /> <el-
tabs v-model="activeName" style="margin-top:15px;" type="border-card"> <el-tab-
pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name=
"item.key"> <keep-alive> <tab-pane v-if="activeName==item.key" :type="item.key"
@create="showCreatedTimes" /> </keep-alive> </el-tab-pane> </el-tabs> </div> </
template> <script> import TabPane from './components/TabPane' export default {
name: 'Tab', components: { TabPane }, data() { return { tabMapOptions: [ { label
: 'China', key: 'CN' }, { label: 'USA', key: 'US' }, { label: 'Japan', key: 'JP'
}, { label: 'Eurozone', key: 'EU' } ], activeName: 'CN', createdTimes: 0 } },
watch: { activeName(val) { this.$router.push(`${this.$route.path}?tab=${val}`) }
}, created() { // init the default selected tab const tab = this.$route.query.
tabif (tab) { this.activeName = tab } }, methods: { showCreatedTimes() { this.
createdTimes= this.createdTimes + 1 } } } </script> <style scoped> .tab-
container{ margin: 30px; } </style>
Technology