el-table的行内编辑功能,并且可以改变data数组中的信息。展示时不显示输入框,双击时显示输入框可进行编辑,数去焦点时对已输入数据进行保存
时间: 2024-04-15 09:31:47 浏览: 166
vue el-table实现行内编辑功能
4星 · 用户满意度95%
您可以使用 element-ui 中的 `<el-table>` 组件配合 `<el-table-column>` 的 `slot-scope` 属性和 `render` 函数来实现行内编辑功能。在双击行时,将对应的行数据的某个属性设置为可编辑状态,然后在失去焦点时保存已输入的数据。
以下是一个示例代码:
```vue
<template>
<div>
<el-table :data="tableData">
<el-table-column label="姓名" prop="name">
<template slot-scope="scope">
<div v-if="!scope.row.editable">{{ scope.row.name }}</div>
<el-input v-else v-model="scope.row.name" @blur="saveData(scope.row)"></el-input>
</template>
</el-table-column>
<!-- 其他列 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', editable: false },
{ name: '李四', editable: false },
// 其他行数据
]
};
},
methods: {
saveData(row) {
// 保存已输入的数据
row.editable = false;
// 发送请求保存数据到后端或更新 data 数组等操作
}
}
};
</script>
```
在上述示例代码中,通过遍历 `tableData` 数组渲染表格行,并通过 `v-if` 和 `v-else` 来实现根据 `editable` 属性的值来显示不同的内容。当 `editable` 为 `false` 时,显示非编辑状态的内容;当 `editable` 为 `true` 时,显示可编辑的输入框。在输入框失去焦点时,调用 `saveData` 方法保存已输入的数据,并将 `editable` 设置为 `false`,从而展示非编辑状态的内容。
您可以根据具体需求修改示例代码中的数据和列属性,以及保存数据的逻辑。
阅读全文