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/查看完整代码。

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

2 个答案: