点击“灯示条件”按钮能控制表格中“灯示条件”这一列的显隐
勾选前：
勾选后：
代码：
“灯示条件”按钮：
<a-checkbox
v-model:checked="conditioncChecked"
class="chos"
@click="changeChecked"
>灯示条件</a-checkbox
>
表格的列数据：
const lightColumns = ref([
{
title: '列名一',
dataIndex: 'companyName',
key: 'companyName',
width: '6%'
},
{
title: '列名二',
dataIndex: 'taskName',
key: 'taskName',
width: '10%'
},
{
title: '灯示条件',
dataIndex: 'lightCondition',
key: 'lightCondition',
width: '15%',
type: 'wrap'
},
{
title: '灯示情况',
key: 'list',
dataIndex: 'list',
align: 'left'
}
]);
columns没有子级children的情况： 增加一种方法，datas 为表格中的列名配置
import datas from "@/utils/column";
export default {
columns: [
{
name: "No.",
key: "No.",
},
{
name: "Project",
key: "Project",
},
{
name: "Assignee",
key: "Assignee",
},
{
name: "Subject",
key: "Subject",
},
{
name: "Status",
key: "Status",
},
{
name: "File Type",
key: "File Type",
},
{
name: "In Progress Date",
key: "In Progress Date",
},
{
name: "No. of Pages",
key: "No. of Pages",
},
{
name: "No. of Reference",
key: "No. of Reference",
},
],
allDatas: [
"No.",
"Project",
"Assignee",
"Subject",
"Status",
"File Type",
"In Progress Date",
"No. of Pages",
"No. of Reference",
],
};
<template>
<div>
<el-popover
:visible="visible"
placement="bottom"
:width="250"
style="height: 200px"
>
<el-tree
:data="columns"
show-checkbox
node-key="key"
ref="tree"
:props="defaultProps"
:default-checked-keys="defaultChecked"
@check="handleCheckChange"
style="max-height: 450px; overflow-y: auto; overflow-x: hidden"
/>
<template #reference>
<el-button-group class="ml-4">
<el-button
@click="selectBtn()"
class="el-popover-btn-left"
size="small"
type="primary"
>Select All</el-button
>
<el-button
class="el-popover-btn"
size="small"
type="primary"
@click="visible = true"
icon="Setting"
></el-button>
</el-button-group>
</template>
</el-popover>
<el-table :data="tableData" class="tablePage" style="margin-top: 20px">
<template v-if="checkColumns.indexOf('No.') > -1">
<el-table-column prop="id" label="No." width="80">
<template #default="scope"
><div class="underLine">
{{ scope.row.id }}
</div></template
>
</el-table-column>
</template>
<template v-if="checkColumns.indexOf('Project') > -1"
><el-table-column prop="project" label="Project"
/></template>
<template v-if="checkColumns.indexOf('Assignee') > -1">
<el-table-column prop="assignee" label="Assignee">
<template #default="scope"
><div class="underLine">
{{ scope.row.assignee }}
</div></template
>
</el-table-column></template
>
<template v-if="checkColumns.indexOf('Subject') > -1">
<el-table-column prop="subject" label="Subject">
<template #default="scope"
><div class="underLine">
{{ scope.row.subject }}
</div></template
>
</el-table-column></template
>
<template v-if="checkColumns.indexOf('Status') > -1">
<el-table-column prop="status" label="Status"
/></template>
<template v-if="checkColumns.indexOf('File Type') > -1">
<el-table-column prop="fileType" label="File Type"
/></template>
<template v-if="checkColumns.indexOf('In Progress Date') > -1">
<el-table-column prop="date" label="In Progress Date"
/></template>
<template v-if="checkColumns.indexOf('No. of Pages') > -1">
<el-table-column prop="pages" label="No. of Pages" />
</template>
<template v-if="checkColumns.indexOf('No. of Reference') > -1">
<el-table-column prop="reference" label="No. of Reference" />
</template>
</el-table>
</div>
</template>
<script>
import datas from "@/utils/column";
export default {
name: "Login",
data() {
return {
visible: false,
defaultProps: {
children: "children",
label: "name",
},
tableData: [
{
id: "00001",
project: "Layout-Main",
subject: "TSP_CMC_49805",
assignee: "Arlo Wang",
status: "In Porgress",
fileType: "DOC",
date: "2024-05-06 08:35:01",
pages: "15",
reference: "40",
},
],
defaultChecked: [],
checkColumns: ["Project"],
tree: "",
allColumns: datas.allDatas,
columns: datas.columns,
};
},
mounted() {
this.checkColumns = this.allColumns;
this.$refs.tree?.setCheckedKeys(this.allColumns);
},
methods: {
//选取改变
handleCheckChange(data, checked, indeterminate) {
this.checkColumns = checked.checkedKeys;
},
selectBtn() {
this.columns.map(function (items, key) {
if (this.checkColumns.indexOf(items.key) === -1) {
this.checkColumns.push(items.key);
}
});
this.$refs.tree?.setCheckedKeys(this.checkColumns);
},
},
};
</script>
<!-- 补充vue3写法 -->
<!--
1. 界面相同
2. 方法
const defaultProps = {
children: "children",
label: "name",
};
const defaultChecked = ref([]);
let columns = datas.columns;
let allColumns = datas.allDatas;
let checkColumns = ref<any>([]);
const tree = ref();
onMounted(() => {
checkColumns.value = allColumns;
tree.value!.setCheckedKeys(allColumns);
});
//选取改变
const handleCheckChange = (data, checked, indeterminate) => {
checkColumns.value = checked.checkedKeys;
};
const selectBtn = () => {
columns.map(function (items, key) {
if (checkColumns.value.indexOf(items.key) === -1) {
checkColumns.value.push(items.key);
}
});
tree.value!.setCheckedKeys(checkColumns.value);
}; -->
columns有子级children的情况： 增加一种方法，datas 为表格中的列名配置 import datas from "@/utils/column";
export default {
columns: [
{
name: "Paper ID",
key: "aid",
single: true,
webUrl: true,
visible: false,
fixed: true,
width: "150",
},
{
name: "Paper Info",
key: "paperinfo",
visible: true,
single: false,
children: [
{
name: "Submission Date",
visible: true,
key: "submit_date",
width: "200",
},
{
name: "Duration",
key: "submitDuration",
visible: true,
},
{
name: "Status",
key: "paperStatus",
visible: true,
},
{
name: "Title",
visible: true,
key: "article_title",
},
{
name: "Title in Chinese",
visible: true,
width: "150",
key: "titleCn",
},
{
name: "Article Type",
visible: true,
width: "150",
key: "articleTypeName",
},
{
name: "Journal",
visible: true,
key: "journal_title",
},
{
name: "Section",
visible: true,
width: "200",
key: "section_title",
},
{
name: "Warning",
visible: true,
waring: true,
width: "200",
key: "articleWarning",
},
{
name: "Field",
key: "articleField",
visible: true,
},
{
name: "Academic Classification",
key: "manuscriptSource",
width: "180",
visible: true,
},
],
},
{
name: "QC Management",
key: "qcmanagement",
visible: true,
single: false,
children: [
{
name: "QS",
key: "qualityStatus",
visible: true,
},
{
name: "QC Times",
key: "qualityCheckNumber",
visible: true,
},
{
name: "QC Rounds",
key: "qcRounds",
visible: true,
arrayNew: true,
},
{
name: "QC History Messages ",
array: true,
html: true,
key: "qualityMessages",
width: "300",
visible: true,
},
{
name: "Initial Status",
key: "initialStatus",
width: "110",
visible: true,
},
{
name: "Initial Comments",
key: "initialRemark",
width: "140",
visible: true,
popup: true,
},
{
name: "ME Action Required",
key: "meActionRequired",
width: "160",
visible: true,
},
{
name: "QC Name",
key: "qcName",
visible: true,
},
],
},
// --------------------------------------------------
{
name: "Quality Control Results",
key: "qcControlResults",
visible: true,
single: false,
children: [
{
name: "Red Flag",
key: "redFlag",
visible: true,
type: "0",
},
{
name: "Yellow Flag",
key: "yellowFlag",
visible: true,
type: "1",
},
{
name: "Blue Flag",
key: "blueFlag",
visible: true,
type: "2",
},
{
name: "QC Results Comments",
key: "comment",
visible: true,
width: "200",
popup: true,
},
],
},
{
name: "First Author Info",
key: "firstAuthorInfo",
visible: true,
single: false,
children: [
{
name: "Name",
key: "firstAuthor",
visible: true,
},
{
name: "H",
key: "firstHIndex",
visible: true,
},
{
name: "Link",
key: "firstAuthorLink",
visible: true,
},
{
name: "Email",
key: "firstAuthorEmail",
visible: true,
},
{
name: "Affiliation",
key: "firstAuthorAffiliation",
visible: true,
},
],
},
{
name: "Corresponding Author Info",
key: "correspondingAuthorInfo",
visible: true,
single: false,
children: [
{
name: "Name",
key: "correspondingAuthor",
visible: true,
},
{
name: "H",
key: "correspondingHIndex",
visible: true,
},
{
name: "Link",
key: "correspondingLink",
visible: true,
},
{
name: "Email",
key: "correspondingEmail",
visible: true,
},
{
name: "Affiliation",
key: "correspondingAffiliation",
visible: true,
},
],
},
{
name: "Editorial Remark",
key: "editorialRemark",
visible: true,
single: false,
children: [
{
name: "Title",
key: "titleRemark",
visible: true,
},
{
name: "Abstract",
key: "abstractRemark",
visible: true,
},
{
name: "Internal Comments",
width: "300px",
key: "remark",
visible: true,
},
],
},
{
name: "Grammarly",
key: "grammarly",
visible: true,
single: false,
children: [
{
name: "Abstract",
key: "abstractGrammerly",
visible: true,
},
{
name: "Conclusion",
key: "conclusionGrammerly",
visible: true,
},
{
name: "Random",
key: "randomGrammerly",
visible: true,
},
{
name: "Comments",
key: "languageRemark",
width: "300px",
html: true,
visible: true,
},
],
},
{
name: "Scores(1-10)",
key: "scores",
visible: true,
single: false,
children: [
{
name: "EA",
key: "eaScore",
visible: true,
},
{
name: "ME",
key: "meScore",
visible: true,
},
],
},
{
name: "Sensitivity",
key: "sensitivity",
visible: true,
single: false,
children: [
{
name: "Valid",
key: "sensitiveSuccess",
visible: true,
},
{
name: "Fail",
key: "sensitiveError",
visible: true,
},
],
},
{
name: "Similarity Check(%)",
key: "similarityCheck",
visible: true,
single: false,
children: [
{
name: "Total",
key: "similarity",
visible: true,
},
{
name: "Max",
key: "similarityMax",
visible: true,
},
],
},
{
name: "ME & SCE & EA",
key: "meEa",
visible: true,
single: false,
children: [
{
name: "EA",
key: "eaName",
visible: true,
},
{
name: "SCE",
key: "sceName",
visible: true,
},
{
name: "ME",
key: "meName",
visible: true,
},
],
},
{
name: "PE Information",
key: "peInformation",
visible: true,
single: false,
children: [
{
name: "Name",
key: "preReviewer",
visible: true,
},
{
name: "Decision",
key: "preReviewDecisionDesc",
visible: true,
},
{
name: "Start",
key: "preReviewDate",
visible: true,
},
{
name: "End",
key: "preReviewDecisionDate",
visible: true,
},
{
name: "Comments",
key: "preReviewRemark",
html: true,
width: "300px",
visible: true,
},
],
},
{
name: "FD Information",
key: "fdinformation",
visible: true,
single: false,
children: [
{
name: "Name",
key: "finalReviewer",
visible: true,
},
{
name: "Decision",
key: "finalReviewDecisionDesc",
visible: true,
},
{
name: "Start",
key: "finalReviewDate",
visible: true,
},
{
name: "End",
key: "finalReviewDecisionDate",
visible: true,
},
],
},
{
name: "Lasted Operator",
key: "operatorName",
width: "150px",
single: true,
visible: true,
},
{
name: "Other Notes",
key: "invitationNotes",
width: "300px",
single: true,
visible: true,
},
{
name: "Time Indicators (days)",
key: "timeIndicators",
width: "300px",
visible: true,
children: [
{
name: "Review",
key: "sendToReviewDays",
width: "100px",
visible: true,
},
{
name: "Round1 Days",
width: "120px",
key: "roundOneDays",
visible: true,
},
{
name: "Round1 Submitted Days ",
width: "180px",
key: "roundOneSubmittedDays",
visible: true,
},
{
name: "Accepted",
key: "acceptedDays",
visible: true,
},
{
name: "Payment",
key: "paymentDays",
visible: true,
},
{
name: "Production",
key: "productionDays",
visible: true,
},
{
name: "Production Files Uploaded",
key: "productionFileUploadedDays",
width: "200px",
visible: true,
},
{
name: "Online",
key: "onlineDays",
width: "100px",
visible: true,
},
{
name: "Published",
key: "publishedDays",
width: "100px",
visible: true,
},
],
},
],
};
组件中使用：
//选取改变
const handleCheckChange = (data, checked, indeterminate) => {
let pd;
checkColumns.value.forEach((item, index) => {
if (!item.single) {
// 有children数组
if (item.key === data.key) {
checkColumns.value[index].visible = checked;
// TODO : ------------------------------------------------------
// 暂时先注释下方两行，这个筛选设置bug：选了一个大类的子菜单，但是整个大类的都不见了
// 注释完后暂时解决了选择子类，整个大类会消失的问题
// item.children.forEach((value, da) => {
// checkColumns.value[index].children[da].visible = checked;
// });
} else {
pd = false;
item.children.forEach((value, da) => {
if (value.key === data.key) {
checkColumns.value[index].children[da].visible = checked;
}
if (value.visible) {
pd = true;
}
});
checkColumns.value[index].visible = pd;
}
} else {
// 无children数组
if (item.key === data.key) {
checkColumns.value[index].visible = checked;
}
}
});
tableKey.value = Math.random();
};
