elementui 实现选中一行编辑
时间: 2023-02-06 10:31:12 浏览: 98
可以使用 Element UI 的 `el-table` 组件来实现选中一行编辑的功能。
首先,在表格的每一行中添加一个可编辑的单元格或者按钮,用来触发编辑功能。
然后,在点击可编辑的单元格或按钮时,设置一个状态变量 `editingRow` 为当前行的数据,并且在表格的每一行中使用 `v-if` 指令来判断当前行是否处于编辑状态。
如果当前行处于编辑状态,则显示可编辑的输入框或下拉框;如果当前行不处于编辑状态,则显示普通的文本。
最后,在点击保存按钮时,将 `editingRow` 设置为 null,表示当前行已经退出编辑状态。
下面是一个示例代码:
```
<template>
<el-table :data="tableData" v-if="!editingRow">
<el-table-column prop="name" label="名称" />
<el-table-column prop="value" label="值" />
<el-table-column prop="actions" label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="editRow(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-table v-else>
<el-table-column prop="name" label="名称">
<template slot-scope="scope">
<el-input v-model="editingRow.name" />
</template>
</el-table-column>
<el-table-column prop="value" label="值">
<template slot-scope="scope">
<el-input v-model="editingRow.value" />
</template>
阅读全文