Vue+Element UI复选框选中记录获取异常求助

Let's break down the issues in your code and fix them step by step:

1. Critical Syntax Errors That Break Your Logic #

These are the most likely culprits causing your multipleSelection array to never update correctly:

a. Typo in data() Function #

You misspelled return as retrun — this means your multipleSelection array isn't being properly initialized. The data() function will return nothing, so this.multipleSelection will be undefined, and any check on its length will either throw an error or evaluate to a value that forces your logic to use the full dataset.

Fix the typo:

data() {
  return { // Correct spelling here
    multipleSelection: []
  }
}, 

b. Invalid methods Definition #

Your methods aren't wrapped in an object, which means the handleSelectionChange function is never registered as a component method. The @selection-change event can't trigger it, so multipleSelection stays empty forever.

Fix the methods syntax:

methods: { // Wrap methods in an object
  handleSelectionChange(val) {
    this.multipleSelection = val;
    console.log('Selected rows:', val); // Add this to confirm the event fires
  }
}

2. Verify Your Table Checkbox Column Configuration #

Make sure you have a proper selection column in your el-table — without this, the checkboxes won't render, and the selection-change event will never fire:

<el-table
  :data="myapidata"
  @selection-change="handleSelectionChange"
>
  <!-- Required selection column -->
  <el-table-column type="selection" width="55"></el-table-column>
  
  <!-- Your other table columns here -->
  <el-table-column prop="yourProp" label="Your Column"></el-table-column>
</el-table>

3. Debug Your Logic with Additional Logs #

Add more console logs to confirm what's happening with your multipleSelection array:

let data = [];
console.log('Current multipleSelection:', this.multipleSelection);
console.log('Array length:', this.multipleSelection?.length); // Use optional chaining to avoid errors

if (this.multipleSelection.length === 0) { // Prefer strict equality ===
    data = JSON.parse(JSON.stringify(this.myapidata));
    console.log('Using full dataset');
} else {
    data = JSON.parse(JSON.stringify(this.multipleSelection));
    console.log('Using selected rows');
}

4. Additional Checks #

• Ensure your myapidata is properly populated (if it's loaded asynchronously, make sure you're running your data selection logic after the data is fetched).
• If you're using pagination or table filtering, confirm the selection-change event correctly captures selected rows across pages/filters (Element UI's table handles this by default, but it's worth verifying).

Once you fix the syntax errors and confirm the selection-change event is triggering (via the console log), your logic should work as expected: when no boxes are checked, you'll get the full dataset; when boxes are checked, you'll get only the selected rows.

内容的提问来源于stack exchange，提问作者sheamus