VueJS - 元素UI：如何启用编辑一行el-table-column

Question

我希望连续表可以使用启用和禁用参数进行编辑，如果单击编辑按钮操作，则启用一行表，但如果单击保存按钮操作则禁用。并且禁用默认表值。

这是我的代码：

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

Answer 1

这是正常的，因为您对所有行使用相同的布尔值。您必须找到一种方法，每行有一个布尔值，表示编辑模式。

这是一个有效的解决方案：https://jsfiddle.net/budgw/d3fxw5wq/1/

如果要将数据与UI逻辑分离（通常是个好主意），则应使用computed属性来创建包含edited字段的列表。

Answer 2

@budgw答案是正确的 - 我想补充他的答案。您可以将其设置为只读属性，而不是禁用输入。我觉得它更好，也让你的桌子看起来更干净。

<el-input v-model="scope.row.name" :readonly="!scope.row.edited"></el-input>

访问https://jsfiddle.net/noted/0atjsrnw/4/获取完整代码。