目錄
業(yè)務(wù)場(chǎng)景
官方鏈接
實(shí)現(xiàn)效果圖
使用框架
代碼展示
template代碼
①、為什么要給el-table綁定【:key="reload"】？
②、為什么給每個(gè)綁定【key="Math.random()"】呢？
③、為什么列改變之后要添加【reload = Math.random();】修改值呢？
④、為什么要給el-table定義【max-height】屬性？
⑥、為什么要給每一列定義【min-width】屬性？為什么不使用【width】屬性？
①、為什么要給【el-popover】設(shè)置固定高度？使用默認(rèn)高度不行嗎？
②、為什么要給下拉框的每一個(gè)選項(xiàng)都添加【style="display: block"】？
script代碼
變量定義
事件定義
①、onMounted事件
②、給表格賦值數(shù)據(jù)
③、dropDownChange事件
CSS代碼
完整代碼
總結(jié)
業(yè)務(wù)場(chǎng)景
當(dāng)我們?cè)趯?duì)表格數(shù)據(jù)查看的時(shí)候，可能某些列的數(shù)據(jù)是當(dāng)前想要重點(diǎn)關(guān)注的，而某些列并不需要展示出來(lái)，我們就可以通過(guò)對(duì)表格的列進(jìn)行實(shí)時(shí)的一個(gè)切換去實(shí)現(xiàn)動(dòng)態(tài)的顯示與隱藏。
官方鏈接
Table 表格：Table 表格 | Element Plus
Checkbox 多選框：Checkbox 多選框 | Element Plus
實(shí)現(xiàn)效果圖
使用框架
Vue3+element-plus(1.2.0-beta.5)
代碼展示
template代碼
<div style="padding-top: 5px">
<!-- 表格主體 -->
<el-table :max-height="maxHeight"
:key="reload"
:data="serverData"
v-loading="loading"
style="width: 100%"
>
<el-table-column
type="index"
label="序號(hào)"
min-width="100"
key="Math.random()"
align="center"
></el-table-column>
<el-table-column
prop="userName"
label="姓名"
min-width="80"
key="Math.random()"
align="center"
sortable
></el-table-column>
<el-table-column
v-if="colData[0].istrue"
prop="summeryStudyingTime"
label="學(xué)習(xí)總時(shí)長(zhǎng)（h）"
min-width="160"
key="Math.random()"
align="center"
sortable
></el-table-column>
<el-table-column
v-if="colData[1].istrue"
prop="summeryActivityTime"
label="活動(dòng)總參與次數(shù)"
min-width="150"
sortable
key="Math.random()"
align="center"
></el-table-column>
<el-table-column
:label="colData[16].title"
align="center"
v-if="colData[16].istrue"
>
<el-table-column
v-if="colData[2].istrue"
prop="topicTime"
label="參與次數(shù)"
sortable
min-width="150"
align="center"
key="Math.random()"
></el-table-column>
<el-table-column
v-if="colData[3].istrue"
prop="topicCommitTime"
label="評(píng)論次數(shù)"
min-width="120"
sortable
align="center"
key="Math.random()"
></el-table-column>
<el-table-column
v-if="colData[4].istrue"
prop="topicReplyTime"
label="回復(fù)次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
<el-table-column
v-if="colData[5].istrue"
prop="topicLikedTime"
label="獲贊次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
<el-table-column
v-if="colData[6].istrue"
prop="topicLikeTime"
label="點(diǎn)贊次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
<el-table-column
v-if="colData[7].istrue"
prop="topicRepliedTime"
label="被回復(fù)次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
<el-table-column
v-if="colData[8].istrue"
prop="topicReplySimilarity"
label="內(nèi)容相似度（%）"
key="Math.random()"
min-width="170"
align="center"
sortable
></el-table-column>
</el-table-column>
<el-table-column
:label="colData[17].title"
align="center"
v-if="colData[17].istrue"
>
<el-table-column
v-if="colData[9].istrue"
prop="dingQuestionnaireGetTime"
label="收到次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
<el-table-column
v-if="colData[10].istrue"
prop="dingQuestionnaireReplyTime"
label="回復(fù)次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
</el-table-column>
<el-table-column
:label="colData[18].title"
align="center"
v-if="colData[18].istrue"
>
<el-table-column
v-if="colData[11].istrue"
prop="practiceTime"
label="參與次數(shù)"
key="Math.random()"
min-width="120"
sortable
align="center"
></el-table-column>
<el-table-column
v-if="colData[12].istrue"
prop="practiceReplyRightTime"
label="回答正確次數(shù)"
key="Math.random()"
min-width="160"
align="center"
sortable
></el-table-column>
</el-table-column>
<el-table-column
v-if="colData[13].istrue"
prop="researchTime"
key="Math.random()"
min-width="180"
align="center"
sortable
label="研究與挑戰(zhàn)-參與次數(shù)"
></el-table-column>
<el-table-column
v-if="colData[14].istrue"
prop="questionnaireTime"
label="調(diào)查問(wèn)卷-參與次數(shù)"
align="center"
key="Math.random()"
min-width="170"
sortable
></el-table-column>
<el-table-column
v-if="colData[15].istrue"
prop="signTime"
label="一鍵簽到-參與次數(shù)"
align="center"
key="Math.random()"
min-width="170"
sortable
></el-table-column>
</el-table>
</div>①、為什么要給el-table綁定【:key="reload"】？
這里是為了在對(duì)列進(jìn)行顯示與隱藏切換之后能夠自動(dòng)渲染表格，防止因?yàn)閗ey重復(fù)而出現(xiàn)使用緩存而不會(huì)重新渲染的問(wèn)題
②、為什么給每個(gè)<el-table-column>綁定【key="Math.random()"】呢？
在vue中使用key是為了讓vue對(duì)列進(jìn)行區(qū)分，類似于id這樣的主鍵對(duì)每個(gè)列進(jìn)行唯一標(biāo)識(shí)。
③、為什么列改變之后要添加【reload = Math.random();】修改值呢？
當(dāng)對(duì)列表進(jìn)行修改的時(shí)候，底層會(huì)根據(jù)key的值進(jìn)行判斷是否進(jìn)行了修改，如果進(jìn)行了修改會(huì)重新渲染表格，否則會(huì)直接進(jìn)行復(fù)用。如果不更新這個(gè)key的話,顯示/隱藏列的時(shí)候,部分DOM不會(huì)重新渲染,導(dǎo)致table變化時(shí)候內(nèi)容錯(cuò)亂。
可以參考這位大佬的博客講解：Vue進(jìn)階（幺伍貳）：el-table-column :key 應(yīng)用_No Silver Bullet的博客-CSDN博客_column-key
④、為什么要給el-table定義【max-height】屬性？
通過(guò)設(shè)置 max-height 屬性為 el-table 指定最大高度。 此時(shí)若表格所需的高度大于最大高度，則會(huì)顯示一個(gè)滾動(dòng)條。
⑥、為什么要給每一列定義【min-width】屬性？為什么不使用【width】屬性？
這是官方文檔說(shuō)明：
我們要實(shí)現(xiàn)的功能是數(shù)據(jù)表格列的動(dòng)態(tài)顯示與隱藏，如果使用width屬性的話，當(dāng)所有顯示的列寬度小于當(dāng)前屏幕會(huì)出現(xiàn)表格末尾空白問(wèn)題，通過(guò)使用min-width屬性可以實(shí)現(xiàn)列寬度的自適應(yīng)
<!-- 對(duì)活動(dòng)類型進(jìn)行選擇 -->
<el-icon :size="20" style="float: right; font-size: 33px" class="grid">
<el-popover placement="bottom" trigger="hover" width="80">
<template #reference>
<el-button><Grid /></el-button>
</template>
<div>
<el-checkbox-group
v-model="activityType"
@change="dropDownChange"
class="checkbox-wrap"
>
<el-checkbox
label="學(xué)習(xí)總時(shí)長(zhǎng)"
size="large"
style="display: block"
/>
<el-checkbox
label="活動(dòng)總參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="一鍵簽到-參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="釘釘調(diào)查問(wèn)卷-收到次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="釘釘調(diào)查問(wèn)卷-回復(fù)次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-評(píng)論次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-回復(fù)次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-獲贊次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-點(diǎn)贊次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-被回復(fù)次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-內(nèi)容相似度"
size="large"
style="display: block"
/>
<el-checkbox
label="研究與挑戰(zhàn)-參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="調(diào)查問(wèn)卷-參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="隨堂練習(xí)-參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="隨堂練習(xí)-回答正確"
size="large"
style="display: block"
/>
</el-checkbox-group>
</div>
</el-popover>
</el-icon>①、為什么要給【el-popover】設(shè)置固定高度？使用默認(rèn)高度不行嗎？
如果不設(shè)置固定高度的話在部分瀏覽器可能會(huì)出現(xiàn)下圖中情況：
②、為什么要給下拉框的每一個(gè)選項(xiàng)都添加【style="display: block"】？
在CSS中，塊級(jí)對(duì)象元素會(huì)單獨(dú)占一行顯示，多個(gè)block元素會(huì)各自新起一行。這樣可以保證每一個(gè)選項(xiàng)都是單獨(dú)一行顯示，而不是擠在一起
script代碼
變量定義
import { reactive, ref, onMounted } from "vue";
import { Grid } from "@element-plus/icons-vue";
import {
getAllStuStudyingSituationByPage,
} from "@/api/CourseAndClassAndStudentManage/CourseManage";
import { ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default {
components: {
Grid,
},
setup() {
//用于存放隨機(jī)數(shù)用于key屬性的綁定
var reload = ref();
//表格數(shù)據(jù)（el-table的data屬性綁定的colData變量）
const serverData = ref([]);
//加載默認(rèn)值為false
const loading = ref(false);
//下拉框默認(rèn)選中的值
const activityType = ref([
"學(xué)習(xí)總時(shí)長(zhǎng)",
"活動(dòng)總參與次數(shù)",
"一鍵簽到-參與次數(shù)",
"釘釘調(diào)查問(wèn)卷-收到次數(shù)",
"釘釘調(diào)查問(wèn)卷-回復(fù)次數(shù)",
"主題討論-參與次數(shù)",
"主題討論-評(píng)論次數(shù)",
"主題討論-回復(fù)次數(shù)",
"主題討論-獲贊次數(shù)",
"主題討論-點(diǎn)贊次數(shù)",
"主題討論-被回復(fù)次數(shù)",
"主題討論-內(nèi)容相似度",
"研究與挑戰(zhàn)-參與次數(shù)",
"調(diào)查問(wèn)卷-參與次數(shù)",
"隨堂練習(xí)-參與次數(shù)",
"隨堂練習(xí)-回答正確",
]);
//表格綁定格式
const colData = reactive([
{
title: "學(xué)習(xí)總時(shí)長(zhǎng)",
name: "summeryStudyingTime",
istrue: true,
type: "other",
rows: "學(xué)習(xí)總時(shí)長(zhǎng)（h）",
},
{
title: "活動(dòng)總參與次數(shù)",
name: "summeryActivityTime",
istrue: true,
type: "other",
rows: "活動(dòng)總參與次數(shù)",
},
{
title: "主題討論-參與次數(shù)",
name: "topicTime",
istrue: true,
type: "topic",
rows: "參與次數(shù)",
},
{
title: "主題討論-評(píng)論次數(shù)",
name: "topicCommitTime",
istrue: true,
type: "topic",
rows: "評(píng)論次數(shù)",
},
{
title: "主題討論-回復(fù)次數(shù)",
name: "topicReplyTime",
istrue: true,
type: "topic",
rows: "回復(fù)次數(shù)",
},
{
title: "主題討論-獲贊次數(shù)",
name: "topicLikedTime",
istrue: true,
type: "topic",
rows: "獲贊次數(shù)",
},
{
title: "主題討論-點(diǎn)贊次數(shù)",
name: "topicLikeTime",
istrue: true,
type: "topic",
rows: "點(diǎn)贊次數(shù)",
},
{
title: "主題討論-被回復(fù)次數(shù)",
name: "topicRepliedTime",
istrue: true,
type: "topic",
rows: "被回復(fù)次數(shù)",
},
{
title: "主題討論-內(nèi)容相似度",
name: "topicReplySimilarity",
istrue: true,
type: "topic",
rows: "內(nèi)容相似度（%）",
},
{
title: "釘釘調(diào)查問(wèn)卷-收到次數(shù)",
name: "dingQuestionnaireGetTime",
istrue: true,
type: "question",
rows: "收到次數(shù)",
},
{
title: "釘釘調(diào)查問(wèn)卷-回復(fù)次數(shù)",
name: "dingQuestionnaireReplyTime",
istrue: true,
type: "question",
rows: "回復(fù)次數(shù)",
},
{
title: "隨堂練習(xí)-參與次數(shù)",
name: "practiceTime",
istrue: true,
type: "practice",
rows: "參與次數(shù)",
},
{
title: "隨堂練習(xí)-回答正確",
name: "practiceReplyRightTime",
istrue: true,
type: "practice",
rows: "回答正確",
},
{
title: "研究與挑戰(zhàn)-參與次數(shù)",
name: "researchTime",
istrue: true,
type: "other",
rows: "研究與挑戰(zhàn)-參與次數(shù)",
},
{
title: "調(diào)查問(wèn)卷-參與次數(shù)",
name: "questionnaireTime",
istrue: true,
type: "other",
rows: "調(diào)查問(wèn)卷-參與次數(shù)",
},
{
title: "一鍵簽到-參與次數(shù)",
name: "signTime",
istrue: true,
type: "other",
rows: "一鍵簽到-參與次數(shù)",
},
{
title: "主題討論",
name: "topic",
istrue: true,
type: "father",
rows: "主題討論",
},
{
title: "釘釘調(diào)查問(wèn)卷",
name: "dingQuestionnaire",
istrue: true,
type: "father",
rows: "釘釘調(diào)查問(wèn)卷",
},
{
title: "隨堂練習(xí)",
name: "practice",
istrue: true,
type: "father",
rows: "隨堂練習(xí)",
},
]);
}事件定義
①、onMounted事件
這里的實(shí)現(xiàn)是通過(guò)實(shí)時(shí)的計(jì)算【屏幕高度-當(dāng)前頁(yè)面除去表格其余部分所占的高度】，保證在不同的屏幕上表格是自適應(yīng)的
onMounted(() => {
console.log("進(jìn)入到onMounted了");
//根據(jù)課程、班級(jí)查詢學(xué)情信息
studentData(
localStorage.getItem("classId"),
localStorage.getItem("courseId"),
currentPage.value,
pageSize.value
);
maxHeight.value = window.innerHeight - 260;
});②、給表格賦值數(shù)據(jù)
此處實(shí)現(xiàn)是通過(guò)調(diào)用后端接口返回的data體給serverData進(jìn)行數(shù)據(jù)賦值
//表格數(shù)據(jù)
async function studentData(classId, courseId, pageNumbers, pageSizes) {
//表格數(shù)據(jù)置空
serverData.value = [];
try {
//調(diào)用后端接口獲取數(shù)據(jù)
const { code, data } = await getAllStuStudyingSituationByPage({
classId: classId,
courseId: courseId,
pageNumber: pageNumbers,
pageSize: pageSizes,
});
//code=0000：表示接口調(diào)用成功；否則：調(diào)用失敗
if (code === "0000") {
//總條數(shù)
total.value = data.total;
// 當(dāng)前頁(yè)數(shù)
currentPage.value = data.pageNum;
//每頁(yè)顯示條目個(gè)數(shù)
// pageSize.value = data.pageSize;
//判斷后端返回的數(shù)據(jù)條數(shù)：=0說(shuō)明沒(méi)有數(shù)據(jù)，給用戶彈窗提示；否則賦值
if (data.list.length != 0) {
serverData.value = data.list;
} else {
ElMessage({
message: "暫無(wú)數(shù)據(jù)",
type: "warning",
});
total.value = 0; //總條數(shù)
}
} else {
ElMessage({
message: "暫無(wú)數(shù)據(jù)",
type: "warning",
});
total.value = 0; //總條數(shù)
}
} catch (error) {
console.log(error);
}
}③、dropDownChange事件
function dropDownChange(val) {
let arr = checkBoxGroup.filter((i) => !val.includes(i));
colData.filter((i) => {
//如果當(dāng)前選中項(xiàng)不等于-1：置為true，表示當(dāng)前列顯示；否則：隱藏
if (arr.indexOf(i.title) != -1) {
i.istrue = false;
} else {
i.istrue = true;
}
});
//這一步的目的是為了當(dāng)“主題討論”下的所有子列都隱藏之后，“主題討論”這個(gè)合并單元格也實(shí)現(xiàn)隱藏
//主題討論
if (
colData[2].istrue == false &&
colData[3].istrue == false &&
colData[4].istrue == false &&
colData[5].istrue == false &&
colData[6].istrue == false &&
colData[7].istrue == false &&
colData[8].istrue == false
) {
//主題討論合并單元格隱藏
colData[16].istrue = false;
}
//釘釘調(diào)查問(wèn)卷
if (colData[9].istrue == false && colData[10].istrue == false) {
colData[17].istrue = false;
}
//隨堂練習(xí)
if (colData[11].istrue == false && colData[12].istrue == false) {
colData[18].istrue = false;
}
//保證key不重復(fù)，自動(dòng)渲染表格
reload = Math.random();
}CSS代碼
.grid {
width: 30px;
right: 25px;
height: 10px;
bottom: 5px;
}
.checkbox-wrap .el-checkbox {
height: 30px;
}完整代碼
<template>
<div class="studyDataStyle">
<div class="titleColumnStyle">
<div class="studyData-Minute-Style">
<p class="contentStyle spacingStyle">課程總時(shí)長(zhǎng)</p>
<p>
<label class="minuteAndJoinNumber" v-if="hours">{{ hour }} </label>
<label class="contentStyle"> 時(shí)</label>
<label class="minuteAndJoinNumber">{{ minutes }} </label>
<label class="contentStyle"> 分</label>
</p>
</div>
<div class="totalJoinNumberStyle">
<p class="contentStyle spacingStyle">已推送活動(dòng)總時(shí)長(zhǎng)</p>
<p>
<label class="minuteAndJoinNumber" v-if="hours"
>{{ joinHour }}
</label>
<label class="contentStyle"> 時(shí)</label>
<label class="minuteAndJoinNumber">{{ joinMinutes }} </label>
<label class="contentStyle"> 分</label>
</p>
</div>
</div>
</div>
<br />
<!--導(dǎo)出Excel表-->
<div>
<export-excel
ref="exportExcel"
:excelData="tableData"
:excelTitle="title"
:excelHeader="excelHeader"
:excelFiterVal="excelFiterVal"
:excelMerges="excelMerges"
type="primary"
style="float: left"
round
>學(xué)生名單</export-excel
>
<div style="color: #409eff; font-size: 20px">
<!-- 課程 -->
<span style="margin-left: 110px">課程：</span>
<el-select
v-model="allCourse"
filterable
placeholder="請(qǐng)選擇課程"
@change="optionChange()"
>
<el-option
v-for="(item, index) in courseOptions"
:key="item.value"
:label="item.label"
:value="{ value: item.value, label: item.label }"
@click="changeClass(index)"
/>
</el-select>
<!-- 班級(jí) -->
<span style="margin-left: 80px">班級(jí)：</span>
<el-select
v-model="allClass"
filterable
placeholder="請(qǐng)選擇班級(jí)"
@change="classChange()"
>
<el-option
v-for="item in classOptions"
:key="item.value"
:label="item.label"
:value="{ value: item.value, label: item.label }"
/>
</el-select>
<!-- 對(duì)活動(dòng)類型進(jìn)行選擇 -->
<el-icon :size="20" style="float: right; font-size: 33px" class="grid">
<el-popover placement="bottom" trigger="hover" width="80">
<template #reference>
<el-button><Grid /></el-button>
</template>
<div>
<el-checkbox-group
v-model="activityType"
@change="dropDownChange"
class="checkbox-wrap"
>
<el-checkbox
label="學(xué)習(xí)總時(shí)長(zhǎng)"
size="large"
style="display: block"
/>
<el-checkbox
label="活動(dòng)總參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="一鍵簽到-參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="釘釘調(diào)查問(wèn)卷-收到次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="釘釘調(diào)查問(wèn)卷-回復(fù)次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-評(píng)論次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-回復(fù)次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-獲贊次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-點(diǎn)贊次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-被回復(fù)次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="主題討論-內(nèi)容相似度"
size="large"
style="display: block"
/>
<el-checkbox
label="研究與挑戰(zhàn)-參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="調(diào)查問(wèn)卷-參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="隨堂練習(xí)-參與次數(shù)"
size="large"
style="display: block"
/>
<el-checkbox
label="隨堂練習(xí)-回答正確"
size="large"
style="display: block"
/>
</el-checkbox-group>
</div>
</el-popover>
</el-icon>
<!-- 搜索框 -->
<el-input
maxlength="20"
size="large"
autosize
v-model="searchContent"
:suffix-icon="Search"
placeholder="輸入姓名搜索"
style="left: -2%; width: 200px; height: 60px; float: right"
@input="searchStudent"
/>
</div>
</div>
<div style="padding-top: 5px">
<!-- 表格主體 -->
<el-table
:max-height="maxHeight"
:key="reload"
:data="serverData"
v-loading="loading"
style="width: 100%"
>
<el-table-column
type="index"
label="序號(hào)"
min-width="100"
key="Math.random()"
align="center"
></el-table-column>
<el-table-column
prop="userName"
label="姓名"
min-width="80"
key="Math.random()"
align="center"
sortable
></el-table-column>
<el-table-column
v-if="colData[0].istrue"
prop="summeryStudyingTime"
label="學(xué)習(xí)總時(shí)長(zhǎng)（h）"
min-width="160"
key="Math.random()"
align="center"
sortable
></el-table-column>
<el-table-column
v-if="colData[1].istrue"
prop="summeryActivityTime"
label="活動(dòng)總參與次數(shù)"
min-width="150"
sortable
key="Math.random()"
align="center"
></el-table-column>
<el-table-column
:label="colData[16].title"
align="center"
v-if="colData[16].istrue"
>
<el-table-column
v-if="colData[2].istrue"
prop="topicTime"
label="參與次數(shù)"
sortable
min-width="150"
align="center"
key="Math.random()"
></el-table-column>
<el-table-column
v-if="colData[3].istrue"
prop="topicCommitTime"
label="評(píng)論次數(shù)"
min-width="120"
sortable
align="center"
key="Math.random()"
></el-table-column>
<el-table-column
v-if="colData[4].istrue"
prop="topicReplyTime"
label="回復(fù)次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
<el-table-column
v-if="colData[5].istrue"
prop="topicLikedTime"
label="獲贊次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
<el-table-column
v-if="colData[6].istrue"
prop="topicLikeTime"
label="點(diǎn)贊次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
<el-table-column
v-if="colData[7].istrue"
prop="topicRepliedTime"
label="被回復(fù)次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
<el-table-column
v-if="colData[8].istrue"
prop="topicReplySimilarity"
label="內(nèi)容相似度（%）"
key="Math.random()"
min-width="170"
align="center"
sortable
></el-table-column>
</el-table-column>
<el-table-column
:label="colData[17].title"
align="center"
v-if="colData[17].istrue"
>
<el-table-column
v-if="colData[9].istrue"
prop="dingQuestionnaireGetTime"
label="收到次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
<el-table-column
v-if="colData[10].istrue"
prop="dingQuestionnaireReplyTime"
label="回復(fù)次數(shù)"
key="Math.random()"
align="center"
min-width="120"
sortable
></el-table-column>
</el-table-column>
<el-table-column
:label="colData[18].title"
align="center"
v-if="colData[18].istrue"
>
<el-table-column
v-if="colData[11].istrue"
prop="practiceTime"
label="參與次數(shù)"
key="Math.random()"
min-width="120"
sortable
align="center"
></el-table-column>
<el-table-column
v-if="colData[12].istrue"
prop="practiceReplyRightTime"
label="回答正確次數(shù)"
key="Math.random()"
min-width="160"
align="center"
sortable
></el-table-column>
</el-table-column>
<el-table-column
v-if="colData[13].istrue"
prop="researchTime"
key="Math.random()"
min-width="180"
align="center"
sortable
label="研究與挑戰(zhàn)-參與次數(shù)"
></el-table-column>
<el-table-column
v-if="colData[14].istrue"
prop="questionnaireTime"
label="調(diào)查問(wèn)卷-參與次數(shù)"
align="center"
key="Math.random()"
min-width="170"
sortable
></el-table-column>
<el-table-column
v-if="colData[15].istrue"
prop="signTime"
label="一鍵簽到-參與次數(shù)"
align="center"
key="Math.random()"
min-width="170"
sortable
></el-table-column>
</el-table>
</div>
<!-- 分頁(yè)器 -->
<div class="demo-pagination-block">
<span class="demo-pagination-block allTotal">共{{ total }}條</span>
<el-config-provider :locale="locale">
<el-pagination
:total="total"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[30, 50, 100]"
:small="small"
:disabled="disabled"
:background="background"
layout="sizes, prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-config-provider>
</div>
</template>
<script>
import { reactive, ref, onMounted } from "vue";
import { Grid } from "@element-plus/icons-vue";
import {
getAllStuStudyingSituationByPage,
} from "@/api/CourseAndClassAndStudentManage/CourseManage";
import { ElMessage } from "element-plus";
export default {
components: {
Grid,
},
setup() {
let maxHeight = ref();
const loading = ref(false); //加載默認(rèn)值為false
const serverData = ref([]);
var reload = ref();
const colData = reactive([
{
title: "學(xué)習(xí)總時(shí)長(zhǎng)",
name: "summeryStudyingTime",
istrue: true,
type: "other",
rows: "學(xué)習(xí)總時(shí)長(zhǎng)（h）",
},
{
title: "活動(dòng)總參與次數(shù)",
name: "summeryActivityTime",
istrue: true,
type: "other",
rows: "活動(dòng)總參與次數(shù)",
},
{
title: "主題討論-參與次數(shù)",
name: "topicTime",
istrue: true,
type: "topic",
rows: "參與次數(shù)",
},
{
title: "主題討論-評(píng)論次數(shù)",
name: "topicCommitTime",
istrue: true,
type: "topic",
rows: "評(píng)論次數(shù)",
},
{
title: "主題討論-回復(fù)次數(shù)",
name: "topicReplyTime",
istrue: true,
type: "topic",
rows: "回復(fù)次數(shù)",
},
{
title: "主題討論-獲贊次數(shù)",
name: "topicLikedTime",
istrue: true,
type: "topic",
rows: "獲贊次數(shù)",
},
{
title: "主題討論-點(diǎn)贊次數(shù)",
name: "topicLikeTime",
istrue: true,
type: "topic",
rows: "點(diǎn)贊次數(shù)",
},
{
title: "主題討論-被回復(fù)次數(shù)",
name: "topicRepliedTime",
istrue: true,
type: "topic",
rows: "被回復(fù)次數(shù)",
},
{
title: "主題討論-內(nèi)容相似度",
name: "topicReplySimilarity",
istrue: true,
type: "topic",
rows: "內(nèi)容相似度（%）",
},
{
title: "釘釘調(diào)查問(wèn)卷-收到次數(shù)",
name: "dingQuestionnaireGetTime",
istrue: true,
type: "question",
rows: "收到次數(shù)",
},
{
title: "釘釘調(diào)查問(wèn)卷-回復(fù)次數(shù)",
name: "dingQuestionnaireReplyTime",
istrue: true,
type: "question",
rows: "回復(fù)次數(shù)",
},
{
title: "隨堂練習(xí)-參與次數(shù)",
name: "practiceTime",
istrue: true,
type: "practice",
rows: "參與次數(shù)",
},
{
title: "隨堂練習(xí)-回答正確",
name: "practiceReplyRightTime",
istrue: true,
type: "practice",
rows: "回答正確",
},
{
title: "研究與挑戰(zhàn)-參與次數(shù)",
name: "researchTime",
istrue: true,
type: "other",
rows: "研究與挑戰(zhàn)-參與次數(shù)",
},
{
title: "調(diào)查問(wèn)卷-參與次數(shù)",
name: "questionnaireTime",
istrue: true,
type: "other",
rows: "調(diào)查問(wèn)卷-參與次數(shù)",
},
{
title: "一鍵簽到-參與次數(shù)",
name: "signTime",
istrue: true,
type: "other",
rows: "一鍵簽到-參與次數(shù)",
},
{
title: "主題討論",
name: "topic",
istrue: true,
type: "father",
rows: "主題討論",
},
{
title: "釘釘調(diào)查問(wèn)卷",
name: "dingQuestionnaire",
istrue: true,
type: "father",
rows: "釘釘調(diào)查問(wèn)卷",
},
{
title: "隨堂練習(xí)",
name: "practice",
istrue: true,
type: "father",
rows: "隨堂練習(xí)",
},
]);
//下拉框默認(rèn)選中的值
const activityType = ref([
"學(xué)習(xí)總時(shí)長(zhǎng)",
"活動(dòng)總參與次數(shù)",
"一鍵簽到-參與次數(shù)",
"釘釘調(diào)查問(wèn)卷-收到次數(shù)",
"釘釘調(diào)查問(wèn)卷-回復(fù)次數(shù)",
"主題討論-參與次數(shù)",
"主題討論-評(píng)論次數(shù)",
"主題討論-回復(fù)次數(shù)",
"主題討論-獲贊次數(shù)",
"主題討論-點(diǎn)贊次數(shù)",
"主題討論-被回復(fù)次數(shù)",
"主題討論-內(nèi)容相似度",
"研究與挑戰(zhàn)-參與次數(shù)",
"調(diào)查問(wèn)卷-參與次數(shù)",
"隨堂練習(xí)-參與次數(shù)",
"隨堂練習(xí)-回答正確",
]);
function dropDownChange(val) {
let arr = checkBoxGroup.filter((i) => !val.includes(i));
colData.filter((i) => {
//如果當(dāng)前選中項(xiàng)不等于-1：置為true，表示當(dāng)前列顯示；否則：隱藏
if (arr.indexOf(i.title) != -1) {
i.istrue = false;
} else {
i.istrue = true;
}
});
//這一步的目的是為了當(dāng)“主題討論”下的所有子列都隱藏之后，“主題討論”這個(gè)合并單元格也實(shí)現(xiàn)隱藏
//主題討論
if (
colData[2].istrue == false &&
colData[3].istrue == false &&
colData[4].istrue == false &&
colData[5].istrue == false &&
colData[6].istrue == false &&
colData[7].istrue == false &&
colData[8].istrue == false
) {
//主題討論合并單元格隱藏
colData[16].istrue = false;
}
//釘釘調(diào)查問(wèn)卷
if (colData[9].istrue == false && colData[10].istrue == false) {
colData[17].istrue = false;
}
//隨堂練習(xí)
if (colData[11].istrue == false && colData[12].istrue == false) {
colData[18].istrue = false;
}
//保證key不重復(fù)，自動(dòng)渲染表格
reload = Math.random();
}
onMounted(() => {
console.log("進(jìn)入到onMounted了");
//根據(jù)課程、班級(jí)查詢學(xué)情信息
studentData(
localStorage.getItem("classId"),
localStorage.getItem("courseId"),
currentPage.value,
pageSize.value
);
maxHeight.value = window.innerHeight - 260;
});
//表格數(shù)據(jù)
async function studentData(classId, courseId, pageNumbers, pageSizes) {
serverData.value = [];
try {
const { code, data } = await getAllStuStudyingSituationByPage({
classId: classId,
courseId: courseId,
pageNumber: pageNumbers,
pageSize: pageSizes,
});
if (code === "0000") {
total.value = data.total; //總條數(shù)
// 當(dāng)前頁(yè)數(shù)
currentPage.value = data.pageNum;
//每頁(yè)顯示條目個(gè)數(shù)
// pageSize.value = data.pageSize;
if (data.list.length != 0) {
serverData.value = data.list;
} else {
ElMessage({
message: "暫無(wú)數(shù)據(jù)",
type: "warning",
});
total.value = 0; //總條數(shù)
}
} else {
ElMessage({
message: "暫無(wú)數(shù)據(jù)",
type: "warning",
});
total.value = 0; //總條數(shù)
}
} catch (error) {
console.log(error);
}
}
return {
changeClass,
maxHeight,
activityType,
loading,
small,
colData,
reload,
serverData,
studentData,
dropDownChange,
};
},
};
</script>
<style>
.grid {
width: 30px;
right: 25px;
height: 10px;
bottom: 5px;
}
.checkbox-wrap .el-checkbox {
height: 30px;
}
</style>參考鏈接：
el-table實(shí)現(xiàn)列篩選功能，控制列的顯示和隱藏（實(shí)現(xiàn)簡(jiǎn)單，效果滿分）_球球和皮皮的博客-CSDN博客_el-table 篩選
vue中使用v-for時(shí)為什么不可以使用index作為key的原因 - web開(kāi)發(fā) - 億速云
Vue進(jìn)階（幺伍貳）：el-table-column :key 應(yīng)用_No Silver Bullet的博客-CSDN博客_column-key文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-417753.html
總結(jié)
多看官方文檔，我們遇到的很多問(wèn)題其實(shí)文檔中都有詳細(xì)說(shuō)明。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-417753.html
如果有想要交流的內(nèi)容歡迎在評(píng)論區(qū)進(jìn)行留言，如果這篇文檔受到了您的喜歡那就留下你點(diǎn)贊、收藏腳印支持一下博主哦~
到了這里，關(guān)于el-table 列的動(dòng)態(tài)顯示與隱藏的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
