0

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

这是我的代码：

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

4

2 回答 2

2

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

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

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

于 2018-05-28T10:02:42.343 回答
1

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

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

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

于 2019-01-28T03:22:00.607 回答