el-table 行编辑

对于 el-table 的行编辑，你可以按照以下步骤进行操作：

1. 首先，确保你已经引入了 Element UI 的相关组件和样式。

2. 在 el-table 的列定义中，将需要编辑的列的 type 属性设置为 'input' 或 'select' 等可编辑的类型。例如：

<el-table-column prop="name" label="姓名" type="input"></el-table-column>
<el-table-column prop="age" label="年龄" type="input"></el-table-column>
<el-table-column prop="gender" label="性别" type="select">
  <template slot-scope="scope">
    <el-select v-model="scope.row.gender" placeholder="请选择">
      <el-option label="男" value="male"></el-option>
      <el-option label="女" value="female"></el-option>
    </el-select>
  </template>
</el-table-column>

3. 在 el-table 的属性中，设置 :row-key 属性为每行数据的唯一标识字段。例如：

<el-table :data="tableData" :row-key="row => row.id">
  <!-- 列定义 -->
</el-table>

4. 使用 v-model 绑定每行数据的编辑状态。例如：

<el-table :data="tableData" :row-key="row => row.id">
  <el-table-column prop="name" label="姓名" type="input">
    <template slot-scope="scope">
      <el-input v-model="scope.row.name" v-if="scope.row.editable"></el-input>
      <span v-else>{{ scope.row.name }}</span>
    </template>
  </el-table-column>
  <!-- 其他列定义 -->
</el-table>

5. 添加编辑按钮，点击后切换编辑状态。例如：

<el-table :data="tableData" :row-key="row => row.id">
  <el-table-column prop="name" label="姓名" type="input">
    <template slot-scope="scope">
      <el-input v-model="scope.row.name" v-if="scope.row.editable"></el-input>
      <span v-else>{{ scope.row.name }}</span>
    </template>
  </el-table-column>
  <!-- 其他列定义 -->
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button @click="editRow(scope.row)">编辑</el-button>
    </template>
  </el-table-column>
</el-table>

6. 在 Vue 实例中添加相关方法，用于切换行的编辑状态。例如：

methods: {
  editRow(row) {
    row.editable = !row.editable;
  }
}

这样，当点击编辑按钮时，对应行的可编辑状态将会切换，并显示相应的编辑表单元素，实现行编辑功能。