效果：表格有很多页，需要支持分页切换时能够记录当前用户所勾选的几条数据，同时id以el-tag标签形式展示， 点击tag标签的叉号时能够取消表格数据的勾选
- 页面相关代码
<div class="schedule-modal">
<el-dialog
v-model="dialogVisible"
title="Schedule Paper to This Issue"
width="80%"
>
<template #default>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="ID: " prop="id">
<el-input
placeholder="Please input"
v-model="formInline.aid"
@keydown.enter="onSearch"
/>
</el-form-item>
<el-form-item>
<el-button @click="onSearch" type="primary">Search</el-button>
<el-button @click="onClear">Clear</el-button>
</el-form-item>
</el-form>
<!-- 新增：显示选中的 Tag 标签 -->
<div style="margin-bottom: 10px">
<el-tag
style="margin-right: 3px"
v-for="(item, index) in selectedIds"
:key="index"
closable
@close="removeSelectedId(item)"
>
{{ item }}
</el-tag>
</div>
<el-button @click="scheduleToIssue" type="primary"
>Schedule to Issue</el-button
>
<div class="selected">
<img src="~@/assets/i.png" alt="" />
Selected {{ (selectedRows && selectedRows.length) || 0 }}
</div>
<el-table
v-loading="loading"
ref="multipleTableRef"
:data="scheduleTableData"
style="width: 100%"
@selection-change="handleSelectionChange"
:header-cell-style="headerCellStyle"
border
stripe
:row-key="rowKey"
@select="handleSelect"
@select-all="handleSelectAll"
>
<el-table-column type="selection" width="40" />
<el-table-column label="ID" prop="id" width="90">
<template #default="scope">
<div style="text-align: left">
<el-text
style="cursor: pointer"
type="primary"
@click="goPage(scope.row)"
>
<svg-icon icon-class="export" />
{{ scope.row.aid }}
</el-text>
</div>
</template>
</el-table-column>
<el-table-column
label="Title"
prop="article_title"
min-width="300"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
label="Status"
prop="status"
min-width="60"
show-overflow-tooltip
>
<template #default="scope">
<span v-html="scope.row.state"></span>
</template>
</el-table-column>
<el-table-column label="Journal" prop="journal_title" width="80">
</el-table-column>
<el-table-column label="Article Type" prop="articleType" width="110">
</el-table-column>
<el-table-column
label="Section"
width="80"
prop="section_title"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
label="Name"
prop="name"
min-width="100"
show-overflow-tooltip
>
<template #default="scope">
<div v-for="item in scope.row.contributorNames">
<div
:title="item"
style="
display: flex;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
{{ item }}
</div>
</div>
</template>
</el-table-column>
<el-table-column
label="Email"
prop="state"
min-width="100"
show-overflow-tooltip
>
<template #default="scope">
<div
v-for="(items, index) in scope.row.contributorEmails"
style="text-align: left"
>
<div class="overhiddle" :title="items">
{{ items }}
</div>
</div>
</template>
</el-table-column>
<el-table-column
label="Affiliation"
prop="city"
min-width="100"
show-overflow-tooltip
>
<template #default="scope">
<div v-if="scope.row.contributorAffiliatoins">
<div
v-for="(items, index) in scope.row.contributorAffiliatoins"
style="text-align: left"
>
<div class="overhiddle" :title="items">
{{ items }}
</div>
</div>
</div>
</template>
</el-table-column>
</el-table>
<div style="text-align: right">
<pagination
@pagination="handleQuery"
v-if="total > 0"
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNum"
v-model:total="total"
/>
</div>
<el-dialog
v-model="innerVisible"
width="50%"
title="Confirm Information"
append-to-body
>
<div
v-if="
checkArticleDatas.repeatAuthorTips &&
checkArticleDatas.repeatAuthorTips.length
"
>
<h3>Repeat Author Tips:</h3>
<div v-for="item in checkArticleDatas.repeatAuthorTips">
{{ item }}
</div>
</div>
<div
v-if="
checkArticleDatas.repeatInstitutionTips &&
checkArticleDatas.repeatInstitutionTips.length
"
>
<h3>Repeat Institution Tips:</h3>
<div v-for="item in checkArticleDatas.repeatInstitutionTips">
{{ item }}
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="innerVisible = false">Cancel</el-button>
<el-button type="primary" @click="confirmInfos">
Confirm
</el-button>
</div>
</template></el-dialog
>
</template>
</el-dialog>
</div>
- js代码
// 新增：移除选中的 ID
const removeSelectedId = (id) => {
// 从 selectedIds 中移除指定的 ID
selectedIds.value = selectedIds.value.filter((item) => item !== id);
// 从 selectedRows 中移除对应的行数据
selectedRows.value = selectedRows.value.filter((row) => row.aid !== id);
const table = multipleTableRef.value;
if (table) {
const row = scheduleTableData.value.find((item) => item.aid === id);
if (row) {
table.toggleRowSelection(row, false);
}
}
};
// 新增：定义 rowKey
const rowKey = (row) => {
return row.id;
};
const handleSelectionChange = (val) => {
multipleSelection.value = val;
};
// 新增：保存选中的 ID
const selectedIds = ref([]);
// 新增：保存选中的行数据
const selectedRows = ref([]);
// 新增：处理选中事件
const handleSelect = (selection, row) => {
if (selection.some((item) => item.aid === row.aid)) {
if (!selectedIds.value.includes(row.aid)) {
selectedIds.value.push(row.aid);
selectedRows.value.push(row);
}
} else {
// 取消选中操作
selectedIds.value = selectedIds.value.filter((id) => id !== row.aid);
// 确保 selectedRows 同步更新
selectedRows.value = selectedRows.value.filter((r) => r.aid !== row.aid);
}
console.log("取消选中的 row.aid:", row.aid); // 确认 row.aid 的值
console.log("取消选中后 selectedRows:", selectedRows.value); // 确认 selectedRows 的值
};
// 新增：处理全选事件
// ... existing code ...
// 新增：处理全选事件
const handleSelectAll = (selection) => {
const currentPageIds = scheduleTableData.value.map((item) => item.aid);
const allRowsSelected = selection.length === currentPageIds.length;
if (allRowsSelected) {
// 全选操作
const newIds = selection.map((item) => item.aid);
const newRows = selection.filter(
(item) => !selectedIds.value.includes(item.aid)
);
// 过滤掉已经存在的 ID，避免重复添加
const uniqueNewIds = newIds.filter((id) => !selectedIds.value.includes(id));
// 追加新的 ID 到 selectedIds 数组
selectedIds.value = [...selectedIds.value, ...uniqueNewIds];
selectedRows.value = [...selectedRows.value, ...newRows];
} else {
// 取消全选操作
const deselectedIds = currentPageIds.filter(
(id) => !selection.some((item) => item.aid === id)
);
selectedIds.value = selectedIds.value.filter(
(id) => !deselectedIds.includes(id)
);
selectedRows.value = selectedRows.value.filter(
(r) => !deselectedIds.includes(r.aid)
);
}
};
恢复勾选状态
// 恢复勾选状态
nextTick(() => {
const table = multipleTableRef.value;
console.log("selectedIds", selectedIds.value);
if (table) {
selectedIds.value.forEach((id) => {
const row = scheduleTableData.value.find((item) => item.aid === id);
if (row) {
table.toggleRowSelection(row, true);
}
});
}
});
