Question

我需要有关vue组件内的element.eleme.io表的帮助。如何将使用按钮选择的表格中的行绑定到我的Vue数据对象？

<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>

我希望所选行（对象operation: {operationName: '', operationStafftype: '', operationAdress: '', operationId: 0}）作为操作存储在我的数据对象中。我在示例中选择的方法（使用row-key）不起作用。

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

非常感谢！

Answer 1

你可以使用元素io的@ current-change事件。你需要在像

这样的表格上添加它

 <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>

然后您将获得当前选定的行值，如

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

Vue元素表绑定选定的行

1 个答案: