![2.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0cc7c660abde43b3a38562ebe408c3fd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=847&h=497&s=808809&e=gif&f=112&b=fcfcfc) 使用 el-table 的 selection 选择数据操作，翻页后之前的选中状态就会消失。但是产品需要我们可以选择不同页面的多条数据，然后一起进行批量操作。 ## 基础的跨页选择认真阅读 el-table 的文档，发现 Element Plus 再一次贴心的替我们考虑了这种场景，通过下面 2 个属性，就可以实现跨页选择。 | 属性名 | 说明 |类型|Default| | --- | --- |---| --- | | reserve-selection|数据刷新后是否保留选项，仅对 `type=selection` 的列有效，请注意，需指定 `row-key` 来让这个功能生效。|`boolean`|false | row-key|行数据的 Key，用来优化 Table 的渲染；在使用`reserve-selection`功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。 |`function`** / `string`|-| 就这么方便 ```html

``` 但是，假设用户选择了几十几百条数据后，想取消其中某几条数据，怎么办？他有可能会刷新页面，然后重新选，也有可能一页页的去查找，总之想想就头大。作为用户体验优先的前端开发，还要继续完善跨页选择的整个交互流程，而不能止步于选了就行。 ## 查看已选数据的界面增加一个弹窗，在此展示所有已选的数据，可以删除不需要的数据，确认完成后，继续批量操作（导出、删除...) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e8b5546e9154553911e5efda2306448~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2094&h=1446&s=447642&e=png&b=ffffff) 我们直接操作`multipleSelection`，弹窗中的删除，会同步更新表格中数据的选中状态。 ```html

{{ item.id }} {{ item.name }}

``` 取消数据选中`toggleRowSelection` ```js const handleDeleteItem = (item) => { multipleTable.value.toggleRowSelection(item, false) } ``` 如果没有查看 el-table 的文档，我可能会写出比现在多得多的代码来实现表格跨页选择功能，Element 确实帮我们解决了很多问题，但是有空了也别忘了去阅读一下源码，了解它是如何实现的。 ## 附记：修改 Mock 数据 > ***如果不用 mock 数据，可以忽略此内容*** 之前 Mock 的列表数据，id 用的@guid，每次请求返回的 id 都会不同，无法模拟跨页选择的效果。为此，专门修改了 mock 脚本，根据页码返回了统一连贯的 id，不过列表的其他内容还是随机的。很少用 Mock 脚本，所以又花了一点时间去学习，还是用 Javascript 来写脚本，所以对于前端同学没啥难度。 ```js var MockJs = require('mockjs'); // 获取自动 Mock 出来的数据 var responseJson = fox.mockResponse.json(); var pageSize = fox.mockRequest.getParam('pageSize') var page = fox.mockRequest.getParam('page') // 修改 responseJson 里的分页数据 // 将 page 设置为请求参数的 page responseJson.result.page = page; console.log('脚本', responseJson.result.page) // 将 total 设置 120 responseJson.result.total = responseJson.result.pages * pageSize; const arr = [] for (var i = 0; i < parseInt(pageSize); i++) { arr.push({ id: pageSize * (page - 1) + i, name: MockJs.mock('@csentence(10,40)'), mail: MockJs.mock('@email'), city: MockJs.mock('@city'), "source": MockJs.mock('@string( pool, 1, 10 )'), "mobile": MockJs.mock('@integer(11)'), "mail": MockJs.mock('@email()'), "url": MockJs.mock("@url('http')"), "memo": MockJs.mock("@paragraph()"), "province": MockJs.mock("@province()"), "city": MockJs.mock("@city()"), "updated": MockJs.mock("@datetime('yyyy-MM-dd HH:mm:ss')"), "created": MockJs.mock("@datetime('yyyy-MM-dd HH:mm:ss')"), "createdBy": MockJs.mock("@name()"), "status": MockJs.mock("@pick('0','1')"), "type": MockJs.mock("@pick(highschool,overseas,company,other)") }) } fox.mockResponse.setBody({ code: 200, message: 'success', result: { total: responseJson.result.pages * pageSize, page: page, pageSize: pageSize, list: arr } }); ``` ## 项目地址本项目GIT地址：[https://github.com/lucidity99/mocha-vue3-system](https://github.com/lucidity99/mocha-vue3-system) 有任何问题或者兴趣也可以在公众号：[自由前端之路](https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzIxMDk3MDQ1MA==&action=getalbum&album_id=2959867669372223493&subscene=159&subscene=&scenenote=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2FndB36QsqhumzUEuJxMaDcg&nolastread=1#wechat_redirect) 找到我。