效果
代码
路径:\src\views\table\tab\index.vue
<template>
<div class="tab-container">
<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" :pubstat ="item.key" />
</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: '发布', key: '1' },
{ label: '停用', key: '2' },
{ label: '隔离', key: '3' }
],
activeName: '1',
createdTimes: 0
}
},
watch: {
activeName(val) {
this.$router.push(`${this.$route.path}?tab=${val}`)
}
},
created() {
// init the default selected tab
const tab = this.$route.query.tab
if (tab) {
this.activeName = tab
}
}
}
</script>
路径:\src\views\table\tab\components\TabPane.vue
<template>
<div class="app-container">
<el-table :data="list" style="width: 100%">
<el-table-column v-loading="loading" min-width="300px">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column min-width="300px">
<template slot-scope="{row}">{{ row.state }}</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getData } from '@/api/manager'
export default {
// props:["pubstat"]
// 也可以指定默认类型和默认值
props: { // 接收父组件传值
pubstat: {
type: String,
default: '1'
}
},
data() {
return {
tmp: [],
loading: false
}
},
computed: {
list() {
const pubstat = this.pubstat
if (pubstat === '1') {
return this.tmp.filter(data => {
return Object.keys(data).some(key => {
return String(data.pubstat) === pubstat
})
})
} else if (pubstat === '2') {
return this.tmp.filter(data => {
return Object.keys(data).some(key => {
return String(data.pubstat) === pubstat
})
})
} else if (pubstat === '3') {
return this.tmp.filter(data => {
return Object.keys(data).some(key => {
return String(data.pubstat) === pubstat
})
})
}
return this.tmp
}
},
created() {
this.getList()
},
methods: {
getList() {
this.loading = true
getData().then(res => {
this.tmp = res['...']
for (var i = 0; i < this.tmp.length; i++) {
this.refreshState(this.tmp[i])
}
this.loading = false
}).catch((error) => {
console.log(error)
this.loading = false
})
},
refreshState(service) {
switch (service.pubstat) {
case '1':
service.state = '发布'
break
case '2':
service.state = '停用'
break
case '3':
service.state = '隔离'
break
}
}
}
}
</script>