提交 1faf3c11 authored 作者: matian's avatar matian

feat:tab切换调整

上级 42281114
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<app-container> <app-container>
<app-list v-bind="tableOptions" ref="list"> <app-list v-bind="tableOptions" ref="list">
<template #header-aside> <template #header-aside>
<el-button type="text" style="margin-top: 5px; font-size: 24px">导出</el-button> <el-button type="text">导出</el-button>
</template> </template>
</app-list> </app-list>
</app-container> </app-container>
......
...@@ -24,7 +24,6 @@ export default { ...@@ -24,7 +24,6 @@ export default {
tableOptions() { tableOptions() {
return { return {
remote: {}, remote: {},
columns: [ columns: [
{ {
label: '排名', label: '排名',
...@@ -48,18 +47,7 @@ export default { ...@@ -48,18 +47,7 @@ export default {
} }
} }
}, },
mounted() { mounted() {},
if (this.tabActive === 'baseInfo') {
// 接口请求 已结束
alert('111')
} else if (this.tabActive === 'toEvaluate') {
// 接口请求 待评价
alert('222')
} else {
// 接口请求 未作答
alert('333')
}
},
methods: { methods: {
toPersonal(row) { toPersonal(row) {
this.$router.push({ this.$router.push({
......
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
<app-container> <app-container>
<app-list v-bind="tableOptions" ref="list"> <app-list v-bind="tableOptions" ref="list">
<template v-slot:table-operate="{ row }"> <template v-slot:table-operate="{ row }">
<el-button type="text" @click="toDetail(row)">查看</el-button> <el-button type="text" @click="toDetail(row)" v-show="tabActive === 'finished'">查看</el-button>
<el-button type="text" @click="toDetail(row)" v-show="tabActive === 'toEvaluate'">批阅</el-button>
</template> </template>
</app-list> </app-list>
</app-container> </app-container>
...@@ -13,12 +14,17 @@ export default { ...@@ -13,12 +14,17 @@ export default {
data() { data() {
return {} return {}
}, },
props: {
tabActive: {
type: String,
default: ''
}
},
computed: { computed: {
// 列表配置 // 列表配置
tableOptions() { tableOptions() {
return { return {
remote: {}, remote: {},
// 'row-style': { height: '10px', color: 'red' },
columns: [ columns: [
{ label: '排名', prop: 'paper_title', align: 'center' }, { label: '排名', prop: 'paper_title', align: 'center' },
{ label: '姓名', prop: 'class_name', align: 'center' }, { label: '姓名', prop: 'class_name', align: 'center' },
......
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<el-card style="height: 400px"> <el-card style="height: 400px">
<h1 style="color: #333; font-size: 16px; border-left: 3px solid #aa1941; padding-left: 7px">分数排名</h1> <h1 style="color: #333; font-size: 16px; border-left: 3px solid #aa1941; padding-left: 7px">分数排名</h1>
<el-button type="text" style="font-size: 16px; color: #aa1941; float: right; margin-top: -40px">导出</el-button> <el-button type="text" style="font-size: 16px; color: #aa1941; float: right; margin-top: -40px">导出</el-button>
<el-tabs v-model="tabActive" style="margin-top: 30px"> <el-tabs v-model="tabActive" style="margin-top: 30px" @canplaythrough="handleClick">
<el-tab-pane label="已完成" name="baseInfo"> <el-tab-pane label="已完成" name="finished">
<RankingAll /> <RankingAll :tabActive="tabActive" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="待评价" name="contacts" lazy> <el-tab-pane label="待评价" name="toEvaluate" lazy>
<RankingAll /> <RankingAll :tabActive="tabActive" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="未作答" name="project" lazy> <el-tab-pane label="未作答" name="noAnswer" lazy>
<RankingAll /> <RankingAll />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="待提交" name="toSubmit" lazy> <el-tab-pane label="待提交" name="toSubmit" lazy>
...@@ -25,7 +25,25 @@ export default { ...@@ -25,7 +25,25 @@ export default {
components: { RankingAll }, components: { RankingAll },
data() { data() {
return { return {
tabActive: 'baseInfo' tabActive: 'finished'
}
},
created() {
// 已结束
},
methods: {
handleClick(tab, event) {
// console.log(tab, event)
if (tab.index === 1) {
// 待评价
alert('111')
} else if (tab.index === 2) {
// 未作答
alert('222')
} else {
// 未提交
alert('333')
}
} }
} }
} }
......
...@@ -3,16 +3,16 @@ ...@@ -3,16 +3,16 @@
<div style="font-size: 32px; margin-bottom: 15px">测试班级一</div> <div style="font-size: 32px; margin-bottom: 15px">测试班级一</div>
<app-card> <app-card>
<h1 class="title" style="font-size: 28px">班级排名</h1> <h1 class="title" style="font-size: 28px">班级排名</h1>
<el-button type="text" style="font-size: 28px; float: right; margin-top: -40px">导出</el-button> <el-button type="text" style="float: right; margin-top: -40px">导出</el-button>
<el-tabs v-model="tabActive" style="margin-top: 30px" tab-click="handleClick"> <el-tabs v-model="tabActive" style="margin-top: 30px" @tab-click="handleClick">
<el-tab-pane label="已结束" name="finished"> <el-tab-pane label="已结束" name="finished">
<Finished :tabActive="tabActive" /> <Finished />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="待评价" name="toEvaluate" lazy> <el-tab-pane label="待评价" name="toEvaluate" lazy>
<Finished :tabActive="tabActive" /> <Finished />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="未作答" name="noAnswer" lazy> <el-tab-pane label="未作答" name="noAnswer" lazy>
<Finished :tabActive="tabActive" /> <Finished />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</app-card> </app-card>
...@@ -25,18 +25,21 @@ export default { ...@@ -25,18 +25,21 @@ export default {
components: { Finished }, components: { Finished },
data() { data() {
return { return {
tabActive: 'baseInfo' tabActive: 'finished'
} }
}, },
created() {
// 已结束网络请求
},
methods: { methods: {
handleClick(tab, event) { handleClick(tab, event) {
console.log(tab, event) // console.log(tab, event)
if (tab.index === 0) { if (tab.index === 1) {
// 网络请求1 // 待评价
} else if (tab.index === 1) { alert('111')
// 网络请求2
} else { } else {
// 网络请求3 // 未作答
alert('222')
} }
} }
} }
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div style="font-size: 32px; margin-bottom: 15px">测试班级一</div> <div style="font-size: 32px; margin-bottom: 15px">测试班级一</div>
<app-card> <app-card>
<h1 class="title" style="font-size: 28px">班级排名</h1> <h1 class="title" style="font-size: 28px">班级排名</h1>
<el-button type="text" style="font-size: 28px; float: right; margin-top: -40px">导出</el-button> <el-button type="text" style="float: right; margin-top: -40px">导出</el-button>
<el-tabs v-model="tabActive" style="margin-top: 30px"> <el-tabs v-model="tabActive" style="margin-top: 30px">
<el-tab-pane label="已结束" name="baseInfo"> <el-tab-pane label="已结束" name="baseInfo">
<Finished /> <Finished />
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论