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

拯救
编辑

但当我点击编辑按钮时，所有列的行都被启用

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

---

fiddle:

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

以下是一个可行的解决方案：

---

如果要将数据与UI逻辑分开（通常是个好主意），应使用

computed

属性，以便创建一个包含

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

以下是一个可行的解决方案：

如果您想将数据与UI逻辑分开（通常是个好主意），您应该使用
computed
属性来创建一个带有
编辑的
字段的列表。
@budgw answers是正确的-我想添加到他的答案中。您可以将其设置为只读属性，而不是禁用输入。我认为这样更好，也让你的桌子看起来更干净

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



完整代码请访问。
@budgw答案正确-我想补充他的答案。您可以将其设置为只读属性，而不是禁用输入。我认为这样更好，也让你的桌子看起来更干净

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



查看完整代码。
但万一数据没有字段/指示编辑。正如我所说的，您可以使用计算属性将字段添加到数据中，或者维护第二个列表，专用于编辑模式，长度与您的数据相同：哦，太好了，如果我使用axios从服务器获取数据，如何从服务器设置rowState动态数据？例如，在成功回调/承诺中，初始化rowState如下：
this.rowState=this.tableData.map（row=>{edited:false}）
我遇到一个错误，我的代码方法：{getData（）{…axios({method:'GET'，url:BASE_API+'productpricetiers'，headers:headers，params:this.params}）。然后（response=>{this.dataResponse=response.data.this.getEditState（）}）。catch（error=>{console.log（error）}），getEditState（）{this.rowState=this.pricetiersData.map（行=>{edited=false}}}`但在这种情况下，数据没有字段/指示编辑。正如我所说的，您可以使用计算属性将字段添加到数据中，或者维护第二个列表，专用于编辑模式，长度与您的数据相同：哦，太好了，所以如果我使用axios从服务器获取数据，如何从服务器设置rowState动态数据？例如，在您的成功callback/promise初始化rowState如下：
this.rowState=this.tableData.map（row=>{edited:false}）
我得到一个错误，这里是我的代码方法：{getData（）{…axios（{method:'GET'，url:BASE_API+'productpricetiers'，headers:headers，params:this.params}）。然后（response=>{this.dataResponse=response.data.data this.getEditState（）}）.catch（错误=>{console.log（错误）}），getEditState（）{this.rowState=this.pricetiersData.map（行=>{edited=false}}}`