Vuejs-元素UI:如何启用编辑一行el表列

我希望在行表中可以使用启用和禁用参数进行编辑,如果单击中的编辑按钮操作,则启用一个行表,但如果单击中的保存按钮操作,则禁用。对于默认表值,禁用。

这是我的代码:

<el-table :data="tableData" :key="index" style="width: 100%" stripe>
        <el-table-column label="Name">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" :disabled="isEdit"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="Address">
          <template slot-scope="scope">
            <el-input v-model="scope.row.address" :disabled="isEdit"></el-input>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="default" @click="handleSaveRow">Save</el-button>
            <el-button type="primary" @click="handleEditRow">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>

但当我单击“编辑”按钮时,所有列的行都将启用。

预期 :编辑单击可以更改表的一行以启用

小提琴: https://jsfiddle.net/dede402/otxahoev/