使用
Vue.js 和
Element UI 实现表格单元格编辑的步骤如下：
1. 导入
Element UI 的
表格和表单组件：
```
vue
<
template>
<div>
<el-
table :data="
tableData" style="width: 100%">
<!--
表格列定义 -->
</el-
table>
</div>
</
template>
<script>
import { El
Table, El
TableColumn, ElInput } from '
element-
ui'
export default {
components: {
El
Table,
El
TableColumn,
ElInput
},
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
],
editIndex: -1
}
}
}
</script>
```
2. 在
表格中的每一行定义一个编辑按钮，点击编辑按钮后将当前行进入编辑状态：
```
vue
<el-
table :data="
tableData" style="width: 100%">
<el-
table-column label="姓名">
<
template slot-scope="scope">
<
template v-if="editIndex !== scope.$index">
{{ scope.row.name }}
</
template>
<
template v-else>
<el-input v-model="scope.row.name"></el-input>
</
template>
</
template>
</el-
table-column>
<el-
table-column label="年龄">
<
template slot-scope="scope">
<
template v-if="editIndex !== scope.$index">
{{ scope.row.age }}
</
template>
<
template v-else>
<el-input v-model="scope.row.age"></el-input>
</
template>
</
template>
</el-
table-column>
<el-
table-column label="操作">
<
template slot-scope="scope">
<
template v-if="editIndex !== scope.$index">
<el-button type="primary" size="small" @click="edit(scope.$index)">编辑</el-button>
</
template>
<
template v-else>
<el-button type="success" size="small" @click="save(scope.$index)">保存</el-button>
<el-button type="warning" size="small" @click="cancel(scope.$index)">取消</el-button>
</
template>
</
template>
</el-
table-column>
</el-
table>
```
3. 定义编辑按钮的点击事件和保存、取消按钮的点击事件：
```
vue
export default {
// 省略其他代码
methods: {
edit(index) {
this.editIndex = index
},
save(index) {
this.editIndex = -1
},
cancel(index) {
this.editIndex = -1
}
}
}
```
完整代码如下：
```
vue
<
template>
<div>
<el-
table :data="
tableData" style="width: 100%">
<el-
table-column label="姓名">
<
template slot-scope="scope">
<
template v-if="editIndex !== scope.$index">
{{ scope.row.name }}
</
template>
<
template v-else>
<el-input v-model="scope.row.name"></el-input>
</
template>
</
template>
</el-
table-column>
<el-
table-column label="年龄">
<
template slot-scope="scope">
<
template v-if="editIndex !== scope.$index">
{{ scope.row.age }}
</
template>
<
template v-else>
<el-input v-model="scope.row.age"></el-input>
</
template>
</
template>
</el-
table-column>
<el-
table-column label="操作">
<
template slot-scope="scope">
<
template v-if="editIndex !== scope.$index">
<el-button type="primary" size="small" @click="edit(scope.$index)">编辑</el-button>
</
template>
<
template v-else>
<el-button type="success" size="small" @click="save(scope.$index)">保存</el-button>
<el-button type="warning" size="small" @click="cancel(scope.$index)">取消</el-button>
</
template>
</
template>
</el-
table-column>
</el-
table>
</div>
</
template>
<script>
import { El
Table, El
TableColumn, ElInput, ElButton } from '
element-
ui'
export default {
components: {
El
Table,
El
TableColumn,
ElInput,
ElButton
},
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
],
editIndex: -1
}
},
methods: {
edit(index) {
this.editIndex = index
},
save(index) {
this.editIndex = -1
},
cancel(index) {
this.editIndex = -1
}
}
}
</script>
```
这样就可以通过
Vue.js 和
Element UI 实现表格单元格编辑了。
1710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
