在el-table里面如何实现编辑当前行？

Question

<template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>

methods: {
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },

Answer 1

在行数据中设置一个属性，用来区分当前行或者当前列是否在进行修改，使用v-show实现

1. 在行内添加button，并直接操作当前数据对象，变更其值用来控制当前行或当前列是否修改，注意看几个button的click事件
2. 如果在表格外部使用按钮操作，则定义一个method，传递行数据在table原始数据中的index，在method中操作对应index的数据。

<template>
  <div>
    <el-table :data="list">
      <el-table-column align="center" label="编号" width="80">
        <template slot-scope="{ row }">
          <span v-show="!row.editid">{{ row.id }}</span>
          <el-input v-show="row.editid" v-model="row.id"></el-input>
        </template>
      </el-table-column>
 
      <el-table-column width="180px" label="名称">
        <template slot-scope="{ row }">
          <span v-show="!row.editname">{{ row.name }}</span>
          <el-input v-show="row.editname" v-model="row.name"></el-input>
        </template>
      </el-table-column>
 
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="{ row }">
          <el-button
            v-show="!row.editid"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="row.editid = !row.editid"
          >
            编辑id
          </el-button>
          <el-button
            v-show="!row.editname"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="row.editname = !row.editname"
          >
            编辑名称
          </el-button>
          <el-button
            v-show="row.editid || row.editname"
            type="success"
            size="mini"
            icon="el-icon-circle-check-outline"
            @click="(row.editid = false) || (row.editname = false)"
          >
            Ok
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  name: "growth",
  data() {
    return {
      list: [
        { id: "1", name: "法外狂徒", editid: false, editname: false },
        { id: "2", name: "张三", editid: false, editname: false },
      ],
    };
  },
};
</script>
 
<style lang="scss" scoped></style>>