VUE3 el-table 中的 el-table-column 变成可编辑
时间: 2023-11-22 19:49:14 浏览: 238
根据提供的引用内容,没有找到VUE3 el-table 中的 el-table-column 变成可编辑的方法。但是,可以通过以下步骤实现VUE2 el-table 中的 el-table-column 变成可编辑:
1. 在 el-table-column 中添加 scoped-slot,用于渲染单元格的内容和编辑状态下的单元格内容。
```html
<el-table-column label="Name">
<template slot-scope="scope">
<div v-if="!scope.row.edit">{{ scope.row.name }}</div>
<el-input v-else v-model="scope.row.name"></el-input>
</template>
</el-table-column>
```
2. 在 data 中添加一个属性,用于标记当前行是否处于编辑状态。
```javascript
data() {
return {
tableData: [
{ id: 1, name: 'John', edit: false },
{ id: 2, name: 'Doe', edit: false }
]
}
}
```
3. 在 methods 中添加一个方法,用于切换当前行的编辑状态。
```javascript
methods: {
toggleEdit(row) {
row.edit = !row.edit;
}
}
```
4. 在 el-table 中添加 @row-click 事件,用于切换当前行的编辑状态。
```html
<el-table :data="tableData" @row-click="toggleEdit">
```
经过以上步骤,就可以实现 el-table-column 变成可编辑的效果。
阅读全文