用element table怎么写增删改查
时间: 2023-08-11 22:06:09 浏览: 39
好的,下面是一个使用 Element UI 的表格增删改查示例:
```html
<template>
<div>
<h1>学生列表</h1>
<el-table :data="students">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="性别" prop="gender"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="editStudent(scope.$index)">编辑</el-button>
<el-button @click="deleteStudent(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<h2>添加学生</h2>
<el-form :model="newStudent" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="newStudent.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="newStudent.age"></el-input-number>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="newStudent.gender">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addStudent">添加</el-button>
</el-form-item>
</el-form>
<el-dialog :visible.sync="editingIndex !== -1" title="编辑学生信息">
<el-form :model="newStudent" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="newStudent.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="newStudent.age"></el-input-number>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="newStudent.gender">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="primary" @click="saveStudent">保存</el-button>
<el-button @click="editingIndex = -1">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
students: [
{ name: '小明', age: 18, gender: '男' },
{ name: '小红', age: 20, gender: '女' },
{ name: '小刚', age: 22, gender: '男' },
],
newStudent: { name: '', age: '', gender: '' },
editingIndex: -1,
};
},
methods: {
addStudent() {
this.students.push({
name: this.newStudent.name,
age: this.newStudent.age,
gender: this.newStudent.gender,
});
this.newStudent = { name: '', age: '', gender: '' };
},
editStudent(index) {
this.editingIndex = index;
this.newStudent = Object.assign({}, this.students[index]);
},
saveStudent() {
this.students.splice(this.editingIndex, 1, this.newStudent);
this.newStudent = { name: '', age: '', gender: '' };
this.editingIndex = -1;
},
deleteStudent(index) {
this.students.splice(index, 1);
},
},
};
</script>
```
这个示例中,我们使用了 Element UI 的表格组件 `el-table` 来渲染学生列表,并使用 `el-form` 来添加学生和编辑学生信息。在表格中,我们使用 `el-table-column` 组件来定义列,其中操作列使用了 `slot-scope` 属性来绑定一个函数,用来处理操作按钮的点击事件。在添加学生和编辑学生信息的表单中,我们使用了 `el-input`、`el-input-number` 和 `el-radio-group` 等组件来处理表单输入。在编辑学生信息时,我们使用了 `el-dialog` 对话框组件来展示编辑表单,并使用 `visible.sync` 属性来控制对话框的显示和隐藏。当编辑学生信息时,我们会把 `editingIndex` 变量设置为当前编辑的学生的索引,以便在对话框中显示该学生的信息。保存学生信息时,我们先使用 `splice` 方法从数组中删除原来的学生信息,再使用 `splice` 方法将新的学生信息插入数组中。