<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
©2020 ioDraw All rights reserved
Self made whole person computer program PHP call shell command python Simple record of network programming layui.table Examples of dynamically getting header and list data Big data environment --- data warehouse (hive+mysql+hadoop) The construction of What are the types of variables ?MYSQL database DML Common commands 《 From machine learning to deep learning 》 note (2) Unsupervised learning log4j Method of printing exception stack information Android Development — Display food information according to customer budget