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

【问题标题】：VueJS - Element UI : How to enable edit one row el-table-columnVueJS - 元素 UI：如何启用编辑一行 el-table-column
【发布时间】：2018-05-28 09:24:27
【问题描述】：

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

这是我的代码：

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

【问题讨论】：

标签： vuejs2 contenteditable element-ui

【解决方案1】：

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

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

如果您想将数据与 UI 逻辑分开（通常是个好主意），您应该使用 computed 属性来创建带有 edited 字段的列表。

【讨论】：

但以防万一，数据没有字段/指示编辑。
正如我所说，您可以使用计算属性将字段添加到您的数据中，或者维护一个专用于编辑模式且长度与您的数据相同的第二个列表：jsfiddle.net/budgw/d3fxw5wq/2
哦，太好了，所以如果我用axios从服务器获取数据，如何从服务器设置rowState动态数据？
例如在你的成功回调/承诺中初始化 rowState ：this.rowState = this.tableData.map(row => {edited:false})
我出错了，这里我的代码方法：{ getData() { ... axios({ method: 'GET', url: BASE_API + 'productpricetiers', headers: headers, params: this .params }) .then(response => { this.dataResponse= response.data.data this.getEditState() }) .catch(error => { console.log(error) }) }, getEditState() { this. rowState = this.pricetiersData.map(row => { 已编辑 = false }) } }`

【解决方案2】：

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

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

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

【讨论】：