写一个element-ui 列表增删改查页面
时间: 2023-07-01 10:10:31 浏览: 73
好的,我来为您编写一个element-ui 列表增删改查页面的示例代码。
```
<template>
<div class="example">
<el-button type="primary" class="add-btn" @click="showAddDialog">添加</el-button>
<el-table :data="tableData" style="width: 100%" stripe>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="addDialogVisible" title="添加用户">
<el-form :model="addForm" :rules="addFormRules" ref="addForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="addForm.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="addForm.gender">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleAdd">确 定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="editDialogVisible" title="编辑用户">
<el-form :model="editForm" :rules="editFormRules" ref="editForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="editForm.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="editForm.gender">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleEdit">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 20,
gender: '男'
},
{
name: '李四',
age: 25,
gender: '女'
},
{
name: '王五',
age: 30,
gender: '男'
}
],
addDialogVisible: false,
editDialogVisible: false,
addForm: {
name: '',
age: '',
gender: ''
},
editForm: {
name: '',
age: '',
gender: ''
},
addFormRules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
gender: [{ required: true, message: '请选择性别', trigger: 'blur' }]
},
editFormRules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
gender: [{ required: true, message: '请选择性别', trigger: 'blur' }]
}
}
},
methods: {
showAddDialog() {
this.addDialogVisible = true
},
handleAdd() {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.tableData.push(this.addForm)
this.addDialogVisible = false
this.$message.success('添加成功!')
}
})
},
showEditDialog(row) {
this.editForm = Object.assign({}, row)
this.editDialogVisible = true
},
handleEdit() {
this.$refs.editForm.validate((valid) => {
if (valid) {
const index = this.tableData.findIndex(item => item.name === this.editForm.name)
this.tableData.splice(index, 1, this.editForm)
this.editDialogVisible = false
this.$message.success('编辑成功!')
}
})
},
handleDelete(row) {
this.$confirm('确定要删除该用户吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.tableData.findIndex(item => item.name === row.name)
this.tableData.splice(index, 1)
this.$message.success('删除成功!')
}).catch(() => {})
}
}
}
</script>
<style scoped>
.example {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.add-btn {
margin-bottom: 20px;
}
</style>
```
这个示例代码实现了一个简单的用户信息列表,包括添加用户、编辑用户、删除用户等功能。其中,使用了el-table组件来展示数据,使用弹窗的方式来添加和编辑用户,使用el-form组件进行表单验证。