我现在有一个需求 就是 我使用el-table做分页多选 我新增时候可以进行分页多选 并且保持分页多选的状态 然后我编辑时候我分页多选可以正常回显

<think>我们使用Element UI的el-table组件实现分页多选，并且要求新增和编辑时都能保持分页多选状态（跨页选择），编辑时能正确回显已选项。 关键点： 1. 使用el-table的type="selection"列，并设置reserve-selection属性为true，同时必须指定row-key。 2. 需要维护一个全局变量（例如allSelected）来存储所有选中的数据，因为reserve-selection在数据重新加载时（比如分页切换）会依靠row-key来恢复选中状态，但编辑回显时需要初始化选中状态，这个初始化操作需要在数据加载后通过设置el-table的选中状态来实现。 3. 在编辑时，需要将之前选中的数据（从后台获取或本地存储）设置到全局变量中，然后在表格数据加载完成后，通过el-table的方法（toggleRowSelection）来设置选中状态。 步骤： a. 在data中定义存储所有选中数据的变量（例如allSelectedRows）。 b. 在表格上设置@selection-change事件，用于在用户选择时更新全局选中数据（注意：selection-change返回的是当前页的选中数据，所以我们需要维护一个所有选中数据的数组，在切换页面时不会丢失）。 但是注意：reserve-selection属性会帮我们记住跨页选择，所以实际上我们只需要在编辑回显时手动设置选中，其他时候可以依靠reserve-selection。 c. 编辑时，从后台获取之前保存的选中数据（id数组或对象数组），然后赋值给allSelectedRows，并在每次加载表格数据后（比如分页切换、数据刷新后）使用toggleRowSelection逐行设置选中状态。 具体实现： 模板部分： ```html <el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" :row-key="row => row.id"> <!-- 假设每行数据有唯一id --> <el-table-column type="selection" width="55" :reserve-selection="true"> <!-- 开启跨页选择 --> </el-table-column> <!-- 其他列 --> </el-table> ``` 脚本部分： ```javascript export default { data() { return { tableData: [], // 当前页数据 allSelectedRows: [], // 存储所有选中的行（对象数组） page: 1, size: 10, total: 0 } }, methods: { // 加载表格数据 loadData() { // 模拟API请求 api.getList({ page: this.page, size: this.size }).then(res => { this.tableData = res.data; this.total = res.total; // 数据加载完成后，设置选中状态（用于编辑回显） this.$nextTick(() => { this.setSelectedRows(); }); }); }, // 设置选中行（用于编辑回显） setSelectedRows() { // 注意：这里需要等到表格渲染完成后，通过ref获取表格组件实例 if (this.allSelectedRows.length === 0) return; // 遍历当前页数据，如果当前页的数据在allSelectedRows中，则设置为选中 this.tableData.forEach(row => { // 在allSelectedRows中查找是否有相同的id（根据row-key） const found = this.allSelectedRows.some(item => item.id === row.id); if (found) { this.$refs.multipleTable.toggleRowSelection(row, true); } }); }, // 处理选择变化 handleSelectionChange(selection) { // 注意：selection是当前页的选中行 // 这里我们不需要用这个事件来维护所有选中行，因为reserve-selection已经帮我们维护了 // 但是，如果我们想要在提交时获取所有选中的行，可以使用el-table的方法：getSelectionRows() // 所以这里我们不需要额外处理，但如果我们想自己维护，也可以： // 不过，自己维护的话，需要处理跨页取消的问题，所以建议直接使用el-table的方法获取所有选中行 }, // 获取所有选中的行（通过el-table的方法） getAllSelectedRows() { // 注意：这个方法返回的是当前所有选中的行（跨页） return this.$refs.multipleTable.selection; }, // 编辑时初始化选中 initEdit(selectedRows) { // 在编辑时，将之前选中的行数据赋值给allSelectedRows this.allSelectedRows = selectedRows; // 注意：selectedRows是一个数组，包含所有之前选中的行数据 // 然后重新加载数据，在加载完成后会调用setSelectedRows来回显 this.loadData(); } }, mounted() { this.loadData(); } } ``` 注意：在编辑时，我们调用initEdit方法，传入之前选中的行数据（这些数据需要从后台获取，并且是对象数组，每个对象必须包含row-key指定的属性，这里是id）。然后重新加载数据（当前页），在数据加载完成后，在nextTick中调用setSelectedRows方法设置当前页的选中状态。 但是，这里有一个问题：reserve-selection属性会记住用户的选择（包括跨页），而我们编辑时传入的allSelectedRows可能包含之前选中的行（包括不在当前页的），我们只需要在当前页设置当前页的选中即可，其他页的等到翻页时由reserve-selection自动恢复。但是，我们如何保证在编辑初始化时，所有之前选中的行都被选中呢？实际上，reserve-selection会在表格重新渲染时（比如数据刷新）根据其内部存储的选中key来恢复，而我们手动设置allSelectedRows并调用setSelectedRows，实际上是在reserve-selection的基础上又设置了一次，这样可能会重复。所以，我们需要在编辑初始化时，清除reserve-selection之前存储的状态，然后重新设置。 然而，Element UI的reserve-selection并没有提供清除的方法。因此，我们可能需要另一种思路：在编辑时，先清除表格的选中状态，然后重新设置。 修改setSelectedRows方法： ```javascript setSelectedRows() { const table = this.$refs.multipleTable; // 先清除所有选中 table.clearSelection(); // 然后设置当前页的选中 if (this.allSelectedRows.length === 0) return; this.tableData.forEach(row => { const found = this.allSelectedRows.some(item => item.id === row.id); if (found) { table.toggleRowSelection(row, true); } }); } ``` 但是，clearSelection只能清除当前页的选中状态，其他页的清除不了。所以，我们还需要一个全局的清除。实际上，我们想要的是在编辑初始化时，将之前保存的选中状态完整地设置到表格中（覆盖之前的选择）。我们可以利用reserve-selection的特性，它会在每次数据更新时根据内部存储的选中key来设置选中状态。而内部存储的选中key可以通过table.selection获取（即当前所有选中的行）。所以，我们可以在初始化编辑时，先设置table.selection为我们之前保存的选中行，然后再加载数据？ 但是，Element UI并没有提供直接设置所有选中行的方法。所以，我们只能通过操作内部状态？这并不推荐。 因此，我们采用另一种方法：在编辑初始化时，将之前选中的行数据赋值给allSelectedRows，然后重新加载数据，在每一页加载时，我们通过setSelectedRows方法设置当前页的选中。这样，每一页都会设置，从而覆盖了之前的选择。同时，我们注意在handleSelectionChange中不再维护allSelectedRows，而是完全依靠reserve-selection和setSelectedRows（编辑回显）的结合。 但是，在新增时，用户进行选择，reserve-selection会记录，我们不需要额外操作。在编辑时，我们通过allSelectedRows来回显，并且在每次加载数据后（分页切换）都会调用setSelectedRows来设置当前页的选中。这样，即使reserve-selection内部存储了之前用户的选择，也会被我们的setSelectedRows覆盖（因为我们先clearSelection当前页，然后再设置当前页的选中）。 然而，这样会有一个问题：当我们编辑时，如果之前选中的行不在当前页，那么reserve-selection会帮我们记住，所以当我们翻到那一页时，那一页的行会被reserve-selection自动选中（因为reserve-selection内部存储了）。但是，我们在编辑初始化时，已经将allSelectedRows赋值，并且希望在每一页都设置选中，所以当我们翻到其他页时，也会触发setSelectedRows，从而设置选中。这样，两个机制都在作用，可能会导致重复选中（实际上不会，因为选中同一行两次，第二次不会生效）。而且，reserve-selection在数据更新时会重新应用，所以我们在编辑初始化时，需要清除reserve-selection内部存储的选中状态。 如何清除？我们可以通过重置表格的selection数据。但是，Element UI没有提供方法。所以，我们只能通过改变row-key来强制重置？这不可取。 因此，我们改变思路：在编辑初始化时，我们不仅要设置allSelectedRows，还要将表格的选中状态重置为allSelectedRows。而reserve-selection内部存储的选中状态，我们无法直接修改，但我们可以利用它会在每次数据更新时重新应用的特性，在数据加载前先设置好表格的选中状态（通过table.selection）？但是table.selection是只读的。 所以，我们只能通过toggleRowSelection来设置，但是要设置所有页的选中，我们只能等到每一页加载时再设置。这样，在编辑初始化时，我们清除allSelectedRows，然后重新赋值，然后重新加载数据（从第一页开始），然后每一页加载时，我们设置当前页的选中。这样，当用户翻页时，每一页都会设置，最终所有选中的行都会被选中。 步骤： 1. 编辑时，获取之前保存的选中数据，赋值给allSelectedRows。 2. 重置当前页码为1（这样从第一页开始加载），然后调用loadData。 3. 在loadData的then回调中，使用nextTick调用setSelectedRows，设置当前页（第一页）的选中。 4. 当用户翻页时，同样在加载数据后调用setSelectedRows设置当前页的选中。 这样，所有选中的行都会在对应的分页中被选中。 但是，这样会有一个问题：如果之前选中的行很多，用户需要翻很多页，那么回显过程就会分散到每一页，用户可能会看到翻页过程中选中的行逐渐被选中的过程。但是，由于我们是从第一页开始加载，所以用户会先看到第一页的选中，然后翻页时再看到其他页的选中。这通常是可以接受的。 另外，在新增时，我们不需要回显，所以allSelectedRows初始化为空数组，用户选择时，reserve-selection会记录，并且我们不需要在每次加载数据后设置选中（因为reserve-selection会自动恢复）。但是，为了统一，我们在新增和编辑时都使用同一套设置选中的逻辑（即每次加载数据后调用setSelectedRows），在新增时，allSelectedRows为空，所以不会设置任何选中，而reserve-selection会自动恢复用户之前选择的（跨页），这样也是正确的。 因此，我们修改loadData方法，在每次加载数据后（无论新增还是编辑）都调用setSelectedRows。 但是，注意：在用户进行选择时，我们不需要在setSelectedRows中做任何事，因为reserve-selection已经自动记录了。而setSelectedRows会再次设置，会不会导致用户选择被覆盖？不会，因为setSelectedRows只设置allSelectedRows中存在的行，而用户新增选择的行不会在allSelectedRows中（除非是编辑回显的行，但编辑回显的行已经被reserve-selection记录，并且会被setSelectedRows选中，而用户新选择的行，不会在allSelectedRows中，所以不会被setSelectedRows选中？这样就有问题：用户新选择的行，在翻页后可能会丢失。 因此，我们需要区分两种状态：编辑回显和用户新增选择。实际上，在编辑回显时，我们通过allSelectedRows来回显，而用户新增选择时，我们不应该设置allSelectedRows（allSelectedRows只在编辑初始化时设置）。而用户选择的行，由reserve-selection自动记录。所以，在新增时，我们不需要allSelectedRows，而在编辑时，我们需要。 但是，在编辑时，用户可能会取消选择，或者新增选择，这些操作会改变reserve-selection的记录，但不会影响allSelectedRows。所以，在编辑时，我们提交表单的时候，不能使用allSelectedRows，而应该使用表格的getSelectionRows()方法获取当前所有选中行。 因此，我们修改：在编辑初始化时，我们设置allSelectedRows，然后每次加载数据后，我们根据allSelectedRows来回显（覆盖当前页的选中）。而用户后续的操作（选择或取消选择）由reserve-selection记录，并且会更新表格的selection。这样，在提交时，我们通过表格的getSelectionRows()获取的是最新的选中行（包括编辑回显的行和用户后续的操作）。 所以，在编辑时，我们调用initEdit方法后，用户可能会进行选择操作，这些操作会改变表格的selection，而allSelectedRows只是用来回显的初始值。因此，在编辑时，用户操作后，我们不需要更新allSelectedRows。 总结： 1. 新增：allSelectedRows为空，用户选择由reserve-selection记录，每次翻页，reserve-selection自动恢复，同时setSelectedRows不会做任何事（因为allSelectedRows为空）。 2. 编辑：在初始化时设置allSelectedRows为之前选中的行，然后加载数据，在每一页通过setSelectedRows设置当前页的选中（根据allSelectedRows），用户后续的选择操作由reserve-selection记录，并且会覆盖之前回显的选中（如果用户取消选中，那么回显的选中会被取消）。 这样，在提交时，无论是新增还是编辑，我们都通过this.$refs.multipleTable.selection来获取所有选中的行。 代码调整： 在loadData方法中，获取数据后，调用setSelectedRows： ```javascript loadData() { api.getList({ page: this.page, size: this.size }).then(res => { this.tableData = res.data; this.total = res.total; this.$nextTick(() => { this.setSelectedRows(); }); }); } ``` setSelectedRows方法： ```javascript setSelectedRows() { const table = this.$refs.multipleTable; if (!table) return; // 先清除当前页的选中状态（避免重复） table.clearSelection(); // 如果allSelectedRows为空，则不需要设置 if (this.allSelectedRows.length === 0) return; // 设置当前页的选中 this.tableData.forEach(row => { const found = this.allSelectedRows.some(item => item.id === row.id); if (found) { table.toggleRowSelection(row, true); } }); } ``` 注意：这里先清除当前页的选中，然后根据allSelectedRows设置当前页的选中。这样，在编辑初始化时，当前页的选中状态就是我们传入的allSelectedRows中在当前页的部分。而用户后续的操作（选择或取消）会更新表格的selection（包括跨页选择），所以提交时我们通过table.selection获取的是最终选中的行。 编辑初始化方法： ```javascript initEdit(selectedRows) { // 重置分页到第一页 this.page = 1; // 设置全局回显数据 this.allSelectedRows = selectedRows || []; // 重新加载数据 this.loadData(); } ``` 新增时，我们不需要调用initEdit，只需要重置allSelectedRows为空，并且重置分页即可。 最后，在提交时，获取所有选中行： ```javascript submit() { const selected = this.$refs.multipleTable.selection; // 提交选中的行 } ``` 这样，我们就实现了需求。 但是，注意：在编辑时，如果用户翻到其他页，然后修改了选中状态，然后再翻回第一页，那么第一页的选中状态可能会被setSelectedRows覆盖吗？不会，因为setSelectedRows只在数据加载后执行（即每次翻页后执行），而用户的操作（选择/取消）是在数据加载之后发生的。在数据加载后，我们执行setSelectedRows，将当前页的选中设置为allSelectedRows中对应的行，然后用户的操作会覆盖这些设置吗？实际上，用户的操作是在setSelectedRows之后发生的，所以用户的操作会覆盖setSelectedRows的设置？不对，因为setSelectedRows是通过toggleRowSelection来设置的，它不会覆盖用户的操作，而是叠加。所以，如果一行在allSelectedRows中，setSelectedRows会选中它，然后用户取消选中，那么它就会被取消。而如果一行不在allSelectedRows中，用户选中了，那么它会被选中。这样符合预期。 但是，有一个问题：在编辑时，我们每次翻页都会调用setSelectedRows，它会清除当前页的选中（clearSelection），这样会清除用户在当前页的操作（比如用户在当前页新增的选中）。所以，我们不能在每次翻页时清除当前页的选中。 因此，我们需要改变setSelectedRows：不先清除当前页，而是直接设置allSelectedRows中需要选中的行，并且不改变用户已经选中的其他行。但是，这样可能会造成回显行和用户操作行的重复设置，但toggleRowSelection不会重复选中。 所以，我们去掉clearSelection，而是直接遍历当前页，对于allSelectedRows中存在的行，我们设置为选中，其他行不管。这样，用户在当前页选中的其他行不会被清除。 但是，这样会有一个问题：如果一行在allSelectedRows中，但是用户在当前页手动取消选中了，那么setSelectedRows会再次选中它，这不符合预期（我们希望用户手动取消后，就不选中了）。 所以，我们需要在编辑时，用户手动取消后，将这一行从allSelectedRows中移除？但是，allSelectedRows是用于回显的初始值，我们不应该改变它。而且，用户取消后，我们希望在提交时这一行就不选中了，所以不需要从allSelectedRows中移除，因为提交时我们通过table.selection获取的是最终选中的行（不包括用户取消的）。 但是，setSelectedRows会再次将用户取消的行选中，这样用户取消不了。所以，我们需要避免这种情况。 因此，我们只能通过reserve-selection来记住用户的选择，而不使用allSelectedRows来强制回显。但是，编辑初始化时，我们需要设置回显，而reserve-selection不会自动知道这些回显行。 所以，我们回到最初的问题：如何让reserve-selection在编辑初始化时包含之前选中的行？ 实际上，reserve-selection的工作原理是：它内部维护一个选中行的key的集合。在表格数据刷新时，它会根据这个集合来设置当前页的选中状态。所以，我们可以在编辑初始化时，将之前选中的行的key添加到这个集合中。 但是，Element UI没有提供直接设置这个集合的方法。所以，我们只能通过模拟用户选择的过程，即遍历之前选中的行，对每一行调用toggleRowSelection。但是，如果这些行不在当前页，那么调用toggleRowSelection不会生效，因为当前页没有这些行。所以，我们需要在每一页加载时，将当前页中属于之前选中的行设置为选中。 这和我们之前的做法一样。但是，为了避免清除用户在当前页的选中，我们不再调用clearSelection，而是只对allSelectedRows中的行进行选中操作（不管当前页的其他行）。这样，如果用户已经手动选中了某一行，它不会受到影响。同样，如果用户手动取消了一个回显行，那么setSelectedRows会再次选中它，这样用户无法取消。 所以，为了避免用户无法取消回显行的选中，我们需要在用户手动取消时，将这一行从allSelectedRows中移除？但是，allSelectedRows是初始回显数据，不应该被改变。而且，我们无法区分是回显行还是用户新增行。 因此，我们只能放弃使用allSelectedRows来回显，而是使用reserve-selection的机制，并且将之前选中的行在初始化时通过toggleRowSelection设置到表格中（不管在不在当前页，都设置，但是不在当前页的设置会无效，所以需要分页设置）。同时，我们维护一个状态，表示编辑初始化已经完成，之后不再设置回显。 这显然很复杂。 鉴于这些复杂性，我推荐使用一个成熟的方案：使用el-table的reserve-selection，并且在编辑初始化时，将之前选中的行通过toggleRowSelection设置到表格中（注意：要设置所有选中的行，不管分页）。但是，由于不在当前页的行无法设置，所以我们需要在每一页加载时，将当前页中属于之前选中的行设置为选中。同时，我们维护一个变量，记录编辑初始化已经完成，在完成之后，就不再设置回显（即只在第一次加载数据时设置回显，后续翻页由reserve-selection自动恢复）。 具体： 1. 编辑初始化时，保存选中的行到allSelectedRows，并设置一个标志位editInitialized为true。 2. 在loadData的then回调中，如果editInitialized为true，则调用setSelectedRows（设置当前页的回显），然后将editInitialized设置为false，表示回显已经设置过了，后续翻页不再需要设置（由reserve-selection自动记住）。 3. 这样，在编辑初始化后的第一次加载（通常是第一页）时，我们设置回显，然后后续翻页，reserve-selection会记住用户之后的操作（包括回显行和用户新增/取消的行）。 代码： ```javascript data() { return { // ... editInitialized: false, // 编辑初始化标志 } }, methods: { loadData() { api.getList({ page: this.page, size: this.size }).then(res => { this.tableData = res.data; this.total = res.total; this.$nextTick(() => { if (this.editInitialized) { this.setSelectedRows(); // 只设置一次，后续翻页由reserve-selection自动维护 this.editInitialized = false; } }); }); }, initEdit(selectedRows) { this.page = 1; this.allSelectedRows = selectedRows || []; this.editInitialized = true; // 开启编辑初始化 this.loadData(); }, setSelectedRows() { const table = this.$refs.multipleTable; if (!table) return; if (this.allSelectedRows.length === 0) return; this.tableData.forEach(row => { const found = this.allSelectedRows.some(item => item.id === row.id); if (found) { table.toggleRowSelection(row, true); } }); }, } ``` 这样，编辑初始化时，加载第一页数据，然后设置第一页的回显，editInitialized变为false。当用户翻页时，loadData还会调用，但editInitialized为false，所以不会设置回显，而是由reserve-selection自动恢复（包括之前设置的回显行和用户之后的操作）。 而用户在第一页的操作（比如取消选中一个回显行）会被reserve-selection记录，所以翻页后再回来，这个回显行就不再选中。 新增时，editInitialized为false，所以不会设置回显，完全由用户操作。 提交时，仍然通过table.selection获取所有选中行。 这个方案可以避免用户无法取消回显行的问题，因为回显只在编辑初始化时设置一次，之后的操作由reserve-selection记录，用户取消选中会生效。 因此，最终采用这个方案。 总结代码： 模板： ```html <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" :row-key="row => row.id"> <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column> <!-- 其他列 --> </el-table> ``` 脚本： ```javascript export default { data() { return { tableData: [], page: 1, size: 10, total: 0, allSelectedRows: [], // 编辑时传入的选中行 editInitialized: false // 编辑初始化标志 }; }, methods: { loadData() { // 请求数据 api.getList({ page: this.page, size: this.size }).then(res => { this.tableData = res.data; this.total = res.total; this.$nextTick(() => { // 编辑初始化时，设置回显 if (this.editInitialized) { this.setSelectedRows(); this.editInitialized = false; // 只设置一次 } }); }); }, // 设置选中行 setSelectedRows() { const table = this.$refs.multipleTable; if (!table) return; // 遍历当前页，将allSelectedRows中存在的行设置为选中 this.tableData.forEach(row => { if (this.allSelectedRows.some(item => item.id === row.id)) { table.toggleRowSelection(row, true); } }); }, // 编辑初始化 initEdit(selectedRows) { // 重置分页 this.page = 1; // 保存传入的选中行 this.allSelectedRows = selectedRows || []; // 设置编辑初始化标志 this.editInitialized = true; // 加载数据 this.loadData(); }, // 新增时重置 reset() { // 清空选中 this.$refs.multipleTable.clearSelection(); // 清空当前页的选中 // 重置编辑初始化标志 this.editInitialized = false; this.allSelectedRows = []; // 重置分页 this.page = 1; this.loadData(); }, // 提交 submit() { // 获取所有选中行 const allSelected = this.$refs.multipleTable.selection; // 提交... } }, mounted() { this.loadData(); } }; ``` 注意：在新增时，调用reset方法进行重置。 这样，我们就实现了需求。 §§相关问题§§ 1. 在Element UI中，如何实现表格跨页多选并保存选中状态？ 2. 编辑回显时，如何在分页表格中恢复之前选中的项？ 3. 使用el-table时，reserve-selection属性的作用是什么？它有哪些限制？ 4. 在Vue中，如何优雅地管理表格的选中状态（包括跨页）？ 5. 当表格数据量很大时，如何优化分页多选的性能？</think>根据您的需求（使用Element UI的el-table实现分页多选，并在新增/编辑时保持跨页选择状态），以下是完整解决方案： ### 核心实现方案 ```javascript export default { data() { return { // 表格数据 tableData: [], pagination: { page: 1, size: 10, total: 0 }, // 关键：全局选中状态存储 globalSelections: [], // 存储所有选中的行 isEditMode: false, // 标记当前是否编辑模式 editInitialSelections: [] // 编辑模式初始选中项 } }, methods: { // 加载表格数据 async loadTableData() { const res = await api.getPageData({ page: this.pagination.page, size: this.pagination.size }); this.tableData = res.data.records; this.pagination.total = res.data.total; // 关键：数据加载后恢复选中状态 this.$nextTick(() => { this.restoreSelections(); }); }, // 恢复选中状态 restoreSelections() { const table = this.$refs.multipleTable; if (!table) return; // 清空当前页选择 table.clearSelection(); // 设置当前页选中项 const currentPageIds = this.tableData.map(item => item.id); const selections = this.isEditMode ? this.globalSelections : this.editInitialSelections; selections.forEach(item => { if (currentPageIds.includes(item.id)) { table.toggleRowSelection( this.tableData.find(row => row.id === item.id), true ); } }); }, // 处理选择变化 handleSelectionChange(selection) { // 合并全局选中状态 const updatedSelections = [...this.globalSelections]; selection.forEach(selected => { if (!updatedSelections.some(item => item.id === selected.id)) { updatedSelections.push(selected); } }); // 移除不在当前页但被取消的选项 const currentPageIds = this.tableData.map(item => item.id); this.globalSelections = updatedSelections.filter(item => currentPageIds.includes(item.id) || this.editInitialSelections.some(init => init.id === item.id) ); }, // 进入编辑模式 enterEditMode(initialSelections) { this.isEditMode = true; this.editInitialSelections = [...initialSelections]; this.globalSelections = [...initialSelections]; this.loadTableData(); }, // 进入新增模式 enterAddMode() { this.isEditMode = false; this.globalSelections = []; this.editInitialSelections = []; this.loadTableData(); }, // 获取最终选择结果 getFinalSelections() { return this.$refs.multipleTable.selection; } }, mounted() { this.loadTableData(); } } ``` ### 模板配置 ```html <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" :row-key="row => row.id" > <el-table-column type="selection" width="55" :reserve-selection="true" ></el-table-column> <!-- 其他列 --> <el-table-column prop="name" label="名称"></el-table-column> </el-table> <el-pagination @current-change="val => { pagination.page = val; loadTableData() }" :current-page="pagination.page" :page-size="pagination.size" :total="pagination.total" ></el-pagination> ``` ### 关键实现原理 1. **状态管理**： - `globalSelections`：存储所有选中项（跨页） - `editInitialSelections`：保存编辑模式初始值 - `isEditMode`：区分新增/编辑模式 2. **分页处理**： - 切换分页时重新加载数据 - 数据加载后调用`restoreSelections`恢复选中状态 - 使用`reserve-selection`保持Element UI内部选中状态 3. **编辑模式处理**： - 进入编辑时保存初始选中项 - 确保初始选中项不会被意外移除 - 提交时通过`getFinalSelections()`获取最终选择 4. **选择同步机制**： - 通过`selection-change`事件同步全局状态 - 合并新增选择，移除被取消的选项 - 保留不在当前页但属于初始编辑的选项 ### 使用示例 ```javascript // 进入编辑模式 editRecord(row) { const initialSelections = await api.getSavedSelections(row.id); this.enterEditMode(initialSelections); } // 提交数据 submitForm() { const finalSelections = this.getFinalSelections(); await api.saveData({ selections: finalSelections }); } ``` ### 注意事项 1. **ID唯一性**： ```javascript :row-key="row => row.id" // 必须确保ID全局唯一 ``` 2. **性能优化**： - 超过1000条数据时建议添加虚拟滚动 - 复杂场景可使用Web Worker处理选择逻辑 3. **数据一致性**： - 当后端数据变更时需刷新`editInitialSelections` - 删除操作需同步更新全局选中状态