mg电子游戏网站开发,网站安全检测软件,莱芜话题济南在线,打造一个网站大致思路#xff1a;
把所有选择的数据全部存到一个大数组中#xff0c;切页的时候匹配原数据利用ref节点的.toggleRowSelection方法进行回显
具体步骤#xff1a;
1、勾选和全选时需要判断是选中还是取消#xff0c;然后更新大数组数据。
2、分页获取新数据之后匹配当…
大致思路
把所有选择的数据全部存到一个大数组中切页的时候匹配原数据利用ref节点的.toggleRowSelection方法进行回显
具体步骤
1、勾选和全选时需要判断是选中还是取消然后更新大数组数据。
2、分页获取新数据之后匹配当前页应该选中的数据使用 multipleTableRef.value!.toggleRowSelection(row, true);进行回显
所有代码示例为前端分页
html
templatediv stylepadding: 20pxel-tablerefmultipleTableRef:datatableDataselect-allselectAllChangeselecthandleSelectionChangeel-table-column typeselection width55 /el-table-column propusername label用户名 show-overflow-tooltip /el-table-column propfirstName label姓名 show-overflow-tooltip /el-table-column propemail label邮箱 show-overflow-tooltip //el-table!-- 分页器 --div classpaginationel-paginationv-model:current-pagepagination.pageNumv-model:page-sizepagination.pageSize:page-sizes[10, 20, 50, 100]layouttotal, prev, pager, next,sizes, jumper:totalpagination.totalsize-changehandleSizeChangecurrent-changehandleCurrentChange//divel-button typeprimary clickyesTo确 定/el-button/div
/template js
script setup langts
import { ref, reactive, nextTick } from vue;
import { ElMessage } from element-plus;
import { setUsers } from ../../utils/api;let listAll: any []; // 存起来选中的数据
let multipleSelection: any []; // 当前页选中的数据
const multipleTableRef ref(); // 表格reflet tableData refany([]); // 表格数据
let allList reactiveany([]);
//分页器
const pagination reactiveany({pageNum: 1,pageSize: 10,total: 0,
});// 前端分页-切割数据
const paging () {// 起始位置 (当前页 - 1) x 每页的大小const start (pagination.pageNum - 1) * pagination.pageSize;// 结束位置 当前页 x 每页的大小const end pagination.pageNum * pagination.pageSize;tableData.value allList.slice(start, end);
};// 获取列表数据
const getList async () {// 接口请求allList [{id:1, username: admin1, firstName: 管理员, email: 123456163.com },{id:2, username: admin2, firstName: 管理员, email: 123456163.com },{id:3, username: admin3, firstName: 管理员, email: 123456163.com },{id:4, username: admin4, firstName: 管理员, email: 123456163.com },{id:5, username: admin5, firstName: 管理员, email: 123456163.com },{id:6, username: admin6, firstName: 管理员, email: 123456163.com },{id:7, username: admin7, firstName: 管理员, email: 123456163.com },{id:8, username: admin8, firstName: 管理员, email: 123456163.com },{id:9, username: admin9, firstName: 管理员, email: 123456163.com },{id:10, username: admin10, firstName: 管理员, email: 123456163.com },{id:11, username: admin11, firstName: 管理员, email: 123456163.com },{id:12, username: admin12, firstName: 管理员, email: 123456163.com },{id:13, username: admin13, firstName: 管理员, email: 123456163.com },{id:14, username: admin14, firstName: 管理员, email: 123456163.com },{id:15, username: admin15, firstName: 管理员, email: 123456163.com },{id:16, username: admin16, firstName: 管理员, email: 123456163.com },{id:17, username: admin17, firstName: 管理员, email: 123456163.com },{id:18, username: admin18, firstName: 管理员, email: 123456163.com },];pagination.total allList.length;paging(); toggleSelection(getTurn()); // 回显勾选
};
getList();// 确认导入
const yesTo async () {if (listAll.length) {listAll deduplicate(listAll, username); //去重await setUsers(listAll);ElMessage.success(导入成功);getList();} else {ElMessage.warning(请先选择用户);}
};// 匹配获取当前页应该选中的数据
const getTurn () {let list: any [];listAll.forEach((v: any) {tableData.value.forEach((s: any) {if (v.username s.username) list.push(s);});});return list;
};
// 勾选时
const handleSelectionChange (val: any, item: any) {multipleSelection val;listAll.push(...multipleSelection);if (val.includes(item)) {//勾选时做的事} else {//取消勾选时做的事listAll.forEach((v: any, i: number) {if (v.username item.username) {listAll.splice(i, 1);}});}
};
// 全选
const selectAllChange (val: any) {if (val.length) {multipleSelection JSON.parse(JSON.stringify(val));listAll.push(...val);} else {multipleSelection.forEach((v: any) {listAll.forEach((s: any, i: number) {if (v.username s.username) {listAll.splice(i, 1);}});});multipleSelection [];}
};
// 当前页之前勾选过的数据 - 回显
const toggleSelection (rows?: any) {nextTick(() {if (rows) {rows.forEach((row: any) {multipleTableRef.value!.toggleRowSelection(row, true);});} else {multipleTableRef.value!.clearSelection();}});
};// 分页事件
const handleSizeChange (val: number) {pagination.page 1;pagination.limit val;if (listAll.length) {listAll deduplicate(listAll, username); //去重}getList();
};
const handleCurrentChange (val: number) {pagination.page val;if (listAll.length) {listAll deduplicate(listAll, username); //去重}getList();
};
// 数组去重方法
const deduplicate (arr: any, t: any) {const newArr [arr[0]];for (let i 1; i arr.length; i) {let repeat false;for (let j 0; j newArr.length; j) {if (t arr[i][t] newArr[j][t]) {repeat true;break;}}if (!repeat) newArr.push(arr[i]);}return newArr;
};
/script
