I need help with an element.eleme.io table inside a vue ponent. How do I bind a row in my table which is selected with a button to my Vue data object?

<el-form-item>
  <el-table
    v-model="userData.operation"
    :data="operations"
    border
    row-key="operationId"
    v-if="choosingOperation"
    size="small">
    <el-table-column
      prop="operationName"
      label="Einsatz-Name">
    </el-table-column>
    <el-table-column
      prop="operationAdress"
      label="Einsatz-Adresse">
    </el-table-column>
    <el-table-column
      prop="operationStaffType"
      label="Typ">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="Optionen"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click="userData.operation = operations[operationID]"
          type="text"
          size="small">
          Wählen
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form-item>

I want the chosen row (object operation: {operationName: '', operationStafftype: '', operationAdress: '', operationId: 0}) to be stored in my data-object as operation. my chosen approach in the example (use row-key) does not work.

export default {
  data () {
    return {
      userData: {
        operation: {},
        role: '',
        position: '',
        sender: '',
        identification: ''
      },

Thank you very much!

I need help with an element.eleme.io table inside a vue ponent. How do I bind a row in my table which is selected with a button to my Vue data object?

<el-form-item>
  <el-table
    v-model="userData.operation"
    :data="operations"
    border
    row-key="operationId"
    v-if="choosingOperation"
    size="small">
    <el-table-column
      prop="operationName"
      label="Einsatz-Name">
    </el-table-column>
    <el-table-column
      prop="operationAdress"
      label="Einsatz-Adresse">
    </el-table-column>
    <el-table-column
      prop="operationStaffType"
      label="Typ">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="Optionen"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click="userData.operation = operations[operationID]"
          type="text"
          size="small">
          Wählen
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form-item>

I want the chosen row (object operation: {operationName: '', operationStafftype: '', operationAdress: '', operationId: 0}) to be stored in my data-object as operation. my chosen approach in the example (use row-key) does not work.

export default {
  data () {
    return {
      userData: {
        operation: {},
        role: '',
        position: '',
        sender: '',
        identification: ''
      },

Thank you very much!

• javascript
• vue.js

1 Answer 1

you can use @current-change event of element io. you need to add this on table like

 <el-form-item>
  <el-table
    v-model="userData.operation"
    :data="operations"
    border
    row-key="operationId"
    **@current-change="handleCurrentChange"**
    v-if="choosingOperation"
    size="small">
    <el-table-column
      prop="operationName"
      label="Einsatz-Name">
    </el-table-column>
    <el-table-column
      prop="operationAdress"
      label="Einsatz-Adresse">
    </el-table-column>
    <el-table-column
      prop="operationStaffType"
      label="Typ">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="Optionen"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click="userData.operation = operations[operationID]"
          type="text"
          size="small">
          Wählen
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form-item>

and then you will get current selected row value like

handleCurrentChange(val) {
    this.currentRowObject = val;
}