提供用vue+element写一个增删改查页面的代码
时间: 2023-04-04 20:00:26 浏览: 75
好的,以下是用 Vue Element 编写增删改查页面的示例代码:
<template>
<div>
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%">
<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="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible" title="编辑" :append-to-body="true">
<el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px">
<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.number="editForm.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="editForm.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="updateForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
gender: ''
},
editForm: {
name: '',
age: '',
gender: ''
},
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字值' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
]
},
tableData: [
{ name: '张三', age: 18, gender: 'male' },
{ name: '李四', age: 20, gender: 'female' },
{ name: '王五', age: 22, gender: 'male' }
],
dialogVisible: false,
editIndex: -1
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.tableData.push(this.form)
this.resetForm()
}
})
},
resetForm() {
this.$refs.form.resetFields()
},
handleEdit(index, row) {
this.editIndex = index
this.editForm = Object.assign({}, row)
this.dialogVisible = true
},
updateForm() {
this.$refs.editForm.validate(valid => {
if (valid) {
this.tableData.splice(this.editIndex, 1, this.editForm)
this.dialogVisible = false
}
})
},
handleDelete(index, row) {
this.tableData.splice(index, 1)
}
}
}
</script>
以上是一个简单的增删改查页面的示例代码,其中使用了 Vue Element 的表单、表格和对话框组件。在表格中,可以通过编辑和删除按钮对数据进行修改和删除。在对话框中,可以对选中的数据进行编辑操作。