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

Question

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

这是我的代码：

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

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

预期：编辑点击可以将table的一行更改为启用

fiddle: https://jsfiddle.net/dede402/otxahoev/

Answer 1

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

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

如果您想将数据与 UI 逻辑分开（通常是个好主意），您应该使用 computed 属性以便创建一个包含 edited字段。

Answer 2

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

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

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

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

VueJS - Element UI : How to enable edit one row el-table-column

vuejs2

contenteditable

element-ui