Element-UI实现跨页勾选
最近接到了一个需求，需要保证在翻页和查询的时候，不能清除已经勾选的记录。
实现思路：使Map保存被选择的数据，<主键ID，选中状态true/false>。在执行翻页、查询操作后，遍历Map，将状态为true的数据进行勾选
核心代码：
// 回显勾选状态
const handleSelectionChange = () => {
nextTick(() => {
tableData.value.forEach((item) => {
console.log(map.get(item.id));
if (map.get(item.id)) {
tableRef.value.toggleRowSelection(item, true);
}
});
});
};
全部代码
<template>
<el-row>
<el-form :model="form" label-width="auto" style="max-width: 600px">
<el-form-item label="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</el-row>
<el-table
:data="tableData"
style="width: 100%"
@select="handleSelect"
@select-all="handleSelect"
ref="tableRef"
>
<el-table-column type="selection" width="55" />
<el-table-column label="Date" width="120">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="Name" width="120" />
<el-table-column
property="address"
label="use show-overflow-tooltip"
width="240"
show-overflow-tooltip
/>
<el-table-column property="address" label="address" />
</el-table>
<el-pagination
layout="prev, pager, next"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="globalData.length"
@current-change="handleCurrentChange"
/>
</template>
<script lang="ts" setup>
import { ref, nextTick } from "vue";
interface User {
id: number;
date: string;
name: string;
address: string;
}
const form = ref({
name: "",
});
const map = new Map<Number, boolean>();
const currentPage = ref(1);
const pageSize = ref(4);
const tableRef = ref();
const globalData: User[] = [
{
id: 1,
date: "2016-05-04",
name: "Aleyna Kutzner",
address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
},
{
id: 2,
date: "2016-05-03",
name: "Helen Jacobi",
address: "760 A Street, South Frankfield, Illinois",
},
{
id: 3,
date: "2016-05-02",
name: "Brandon Deckert",
address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
},
{
id: 4,
date: "2016-05-01",
name: "Margie Smith",
address: "23618 Windsor Drive, West Ricardoview, Idaho",
},
{
id: 5,
date: "2017-05-04",
name: "Aleyna Kutzner",
address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
},
{
id: 6,
date: "2017-05-03",
name: "Helen Jacobi",
address: "760 A Street, South Frankfield, Illinois",
},
{
id: 7,
date: "2017-05-02",
name: "Brandon Deckert",
address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
},
{
id: 8,
date: "2017-05-01",
name: "Margie Smith",
address: "23618 Windsor Drive, West Ricardoview, Idaho",
},
];
const tableData: User[] = ref(globalData.slice(0, 4));
// 发生页面变化
const handleCurrentChange = (val: number) => {
const start = (val - 1) * pageSize.value;
const end = start + pageSize.value;
tableData.value = globalData.slice(start, end);
handleSelectionChange();
};
// 选择数据
const handleSelect = (selection: User[]) => {
for (const elem of tableData.value) {
const { id } = elem;
const tlist = selection.filter((item) => item.id === id);
map.set(id, tlist.length > 0);
}
};
// 查询数据
const onSubmit = () => {
const { name } = form.value;
if (!name) {
handleCurrentChange(1);
return;
}
const filteredData = globalData.filter((item) => item.name.includes(name));
tableData.value = filteredData;
handleSelectionChange();
};
// 回显勾选状态
const handleSelectionChange = () => {
nextTick(() => {
tableData.value.forEach((item) => {
console.log(map.get(item.id));
if (map.get(item.id)) {
tableRef.value.toggleRowSelection(item, true);
}
});
});
};
</script>
修正后代码
大佬指点过后，我翻了下文档找到了大佬说的这个参数，这个参数只能用在type="selection"的列上，并指明主键id就能跨页勾选了，非常方便~
在el-table 中加入:row-key="getRowKeys"
const getRowKeys = (row: User) => {
return row.id;
};
在<el-table-column type="selection" width="55" />中加入reserve-selection="true"
全部代码：
<template>
<el-row>
<el-form :model="form" label-width="auto" style="max-width: 600px">
<el-form-item label="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</el-row>
<el-table
:data="tableData"
style="width: 100%"
@select="handleSelect"
@select-all="handleSelect"
:row-key="getRowKeys"
ref="tableRef"
>
<el-table-column type="selection" width="55" reserve-selection="true" />
<el-table-column label="Date" width="120">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="Name" width="120" />
<el-table-column
property="address"
label="use show-overflow-tooltip"
width="240"
show-overflow-tooltip
/>
<el-table-column property="address" label="address" />
</el-table>
<el-pagination
layout="prev, pager, next"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="globalData.length"
@current-change="handleCurrentChange"
/>
</template>
<script lang="ts" setup>
import { ref, nextTick } from "vue";
interface User {
id: number;
date: string;
name: string;
address: string;
}
const form = ref({
name: "",
});
const currentPage = ref(1);
const pageSize = ref(4);
const tableRef = ref();
const globalData: User[] = [
{
id: 1,
date: "2016-05-04",
name: "Aleyna Kutzner",
address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
},
{
id: 2,
date: "2016-05-03",
name: "Helen Jacobi",
address: "760 A Street, South Frankfield, Illinois",
},
{
id: 3,
date: "2016-05-02",
name: "Brandon Deckert",
address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
},
{
id: 4,
date: "2016-05-01",
name: "Margie Smith",
address: "23618 Windsor Drive, West Ricardoview, Idaho",
},
{
id: 5,
date: "2017-05-04",
name: "Aleyna Kutzner",
address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
},
{
id: 6,
date: "2017-05-03",
name: "Helen Jacobi",
address: "760 A Street, South Frankfield, Illinois",
},
{
id: 7,
date: "2017-05-02",
name: "Brandon Deckert",
address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
},
{
id: 8,
date: "2017-05-01",
name: "Margie Smith",
address: "23618 Windsor Drive, West Ricardoview, Idaho",
},
];
const tableData: User[] = ref(globalData.slice(0, 4));
const getRowKeys = (row: User) => {
return row.id;
};
// 发生页面变化
const handleCurrentChange = (val: number) => {
const start = (val - 1) * pageSize.value;
const end = start + pageSize.value;
tableData.value = globalData.slice(start, end);
};
// 选择数据
const handleSelect = (selection: User[]) => {
console.log(
"当前已经选择的数据id列表",
selection.map((elem) => elem.id)
);
};
// 查询数据
const onSubmit = () => {
const { name } = form.value;
if (!name) {
handleCurrentChange(1);
return;
}
const filteredData = globalData.filter((item) => item.name.includes(name));
tableData.value = filteredData;
};
</script>
