管理tab切换闪烁问题修复

This commit is contained in:
赵依梦
2025-12-20 16:51:44 +08:00
parent c1d6021ef8
commit a26dc0aa2b

View File

@@ -12,7 +12,7 @@
</div>
<!-- <div style="color: red;">下面的表格标题及内容需要调整完善</div> -->
<div>
<el-tabs style="width: 100%;" v-model="tabName" @tab-click="handleTabClick">
<el-tabs style="width: 100%;" v-model="tabName" >
<el-tab-pane label="报名记录" name="second">
<el-row style="margin: 20px 0;" :gutter="20">
<el-col :span="4">
@@ -57,12 +57,13 @@
</div>
</el-col>
</el-row>
<div class="tab-content">
<div class="tab-content" v-if="tabName == 'second'">
<el-table border max-height="350" :data="study.list" :header-cell-style="{textAlign: 'center'}"
:cell-style="{ textAlign: 'center' }" style="width: 100%">
<!-- <el-table-column type="selection" width="55"></el-table-column> -->
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="code" label="工号">
<el-table-column prop="code" width="200" label="工号">
</el-table-column>
<el-table-column prop="orgInfo" label="部门">
<template slot-scope="scope">
@@ -78,7 +79,7 @@
</template>
</el-table-column>
<el-table-column prop="signTime" label="报名时间"></el-table-column>
<el-table-column v-if="showSignupActions" label="操作" width="140">
<el-table-column v-if="showSignupActions" label="操作" width="140">
<template slot-scope="scope">
<el-button type="text" size="mini" class="delete-action-link--danger"
@click="handleDeleteSignup(scope.row)">
@@ -96,7 +97,7 @@
<!-- </div> -->
</div>
</el-tab-pane>
<el-tab-pane lazy label="学习记录" name="third">
<el-tab-pane label="学习记录" name="third">
<el-row style="margin: 20px 0;" :gutter="20">
<el-col :span="4">
<div class="grid-content bg-purple">
@@ -146,11 +147,11 @@
</div>
</el-col>
</el-row>
<div class="tab-content">
<div class="tab-content" v-if="tabName == 'third'">
<el-table max-height="350" border :data="learningRecords.list" :header-cell-style="{textAlign: 'center'}"
:cell-style="{ textAlign: 'center' }" style="width: 100%">
<el-table-column prop="aname" label="姓名"></el-table-column>
<el-table-column prop="code" label="工号"></el-table-column>
<el-table-column prop="code" width="200" label="工号"></el-table-column>
<el-table-column prop="orgInfo" label="部门">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="scope.row.orgInfo" placement="top-start">
@@ -175,7 +176,7 @@
{{ scope.row.progress }}%
</template>
</el-table-column>
<el-table-column prop="orgInfo" label="操作" width="120">
<el-table-column label="操作" width="120">
<template slot-scope="scope">
<!--弹出每一项资源的学习情况列表-->
<el-link :underline="false" type="primary" @click.stop="showStudyDetails(scope.row)">查看</el-link>
@@ -192,7 +193,7 @@
</div>
</div>
</el-tab-pane>
<el-tab-pane lazy label="资源学习情况" name="first">
<el-tab-pane label="资源学习情况" name="first">
<el-row style="margin: 20px 0;" :gutter="20">
<el-col :span="4">
<div class="grid-content bg-purple"><el-input clearable v-model="recourseListQuery.contentName"
@@ -210,10 +211,10 @@
</div>
</el-col>
</el-row>
<div class="tab-content">
<div class="tab-content" v-if="tabName == 'first'">
<el-table max-height="350" border :header-cell-style="{textAlign: 'center'}"
:cell-style="{ textAlign: 'center' }" :data="recourseList" style="width: 100%">
<el-table-column label="资源名称">
<el-table-column label="资源名称" prop="contentName">
<template slot-scope="scope">
{{scope.row.contentName}}
</template>
@@ -661,6 +662,11 @@ export default {
mounted() {
this.getCourseDetailCrowds();
this.getSignupList();
this.getStudyRecords();
this.recourseListQuery.courseId = this.courseDetail.id;
this.getResourseList();
this.getResOwnerTree().then((rs) => {
this.resOwnerListMap = rs;
});
@@ -1289,19 +1295,20 @@ export default {
this.study.pageIndex = val;
this.getSignupList();
},
handleTabClick(tab) {
if (tab.name === "second") {
this.getSignupList();
} else if (tab.name === "third") {
this.getStudyRecords();
} else {
// 资源
this.recourseListQuery.courseId = this.courseDetail.id;
this.getResourseList();
}
// handleTabClick(tab) {
// if (tab.name === "second") {
// this.getSignupList();
// } else if (tab.name === "third") {
// this.getStudyRecords();
// } else {
// // 资源
// this.getStudyRecords();
// this.recourseListQuery.courseId = this.courseDetail.id;
// this.getResourseList();
// }
this.tabName = tab.name;
},
// // this.tabName = tab.name;
// },
showStudyDetails(row) {
this.studyDetailQuery.courseId = row.courseId;
this.studyDetailQuery.aid = row.aid;