Hey there! Let's get this sorted so you can bind those selected table rows to your Vue data property properly. Element UI's table component doesn't use v-model directly for row selection—instead, we'll use its built-in event system to capture the selected rows and update your userData.operation value. Here's how to do it step by step:

Step 1: Update the Table Component #

First, add a selection column to your table (so users can actually select rows) and hook up the selection-change event to a method that will update your data:

<el-form-item>
  <el-table 
    :data="operations" 
    border 
    row-key="operationId" 
    v-if="choosingOperation" 
    size="small"
    @selection-change="handleSelectionChange"
  >
    <!-- Add this selection column first -->
    <el-table-column type="selection"></el-table-column>
    
    <el-table-column prop="operationName" label="Einsatz-Name"></el-table-column>
    <el-table-column prop="operationAdress" label="Einsatz-Adresse"></el-table-column>
    <!-- Add your remaining columns here -->
  </el-table>
</el-form-item>

Step 2: Add the Handler Method and Initialize Data #

In your Vue component's script, set up the method to capture selected rows and make sure your userData.operation is initialized correctly:

export default {
  data() {
    return {
      userData: {
        operation: [] // Initialize as empty array to hold selected rows
      },
      operations: [], // Your existing operations dataset
      choosingOperation: true
    };
  },
  methods: {
    handleSelectionChange(selectedRows) {
      // Update userData.operation with the full selected row objects
      this.userData.operation = selectedRows;
      
      // If you only need the operation IDs instead of full objects, use this instead:
      // this.userData.operation = selectedRows.map(row => row.operationId);
    }
  }
};

Optional: Single Row Selection #

If you only want users to select one row at a time, switch to a radio column and use the current-change event instead:

Table Update: #

<el-table-column type="radio"></el-table-column>
<!-- ... -->
@current-change="handleSingleSelection"

Handler Method: #

handleSingleSelection(selectedRow) {
  // For single selection, store either the full row or just the ID
  this.userData.operation = selectedRow ? [selectedRow] : [];
  // Or for just the ID: this.userData.operation = selectedRow?.operationId || null;
}

Key Notes: #

• Ensure your row-key (operationId in your code) is a unique value for each row—this helps Element UI manage selections correctly when your data updates dynamically.
• The selection-change event passes an array of all currently selected rows, so you don't have to track selections manually.

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