<template> <div> <el-dialog title="添加用户信息" :visible.sync="dialogAdd.show"> <el-form :model="formDate" ref="formdong" label-width="100px" :rules="formrules"> <el-form-item label="日期" prop="date"> <el-date-picker v-model="formDate.date" type="date" placeholder="选择日期"> </el-date-picker> </el-form-item> <el-form-item label="姓名" prop="name"> <el-input v-model="formDate.name"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="formDate.email"></el-input> </el-form-item> <el-form-item label="标题" prop="title"> <el-input v-model="formDate.title"></el-input> </el-form-item> <el-form-item label="评价" prop="evaluate"> <el-input v-model="formDate.evaluate"></el-input> </el-form-item> <el-form-item label="状态" prop="state"> <el-input v-model="formDate.state"></el-input> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogAdd.show = false">取 消</el-button> <el-button type="primary" @click="dialogFormAdd('formdong')">确 定</el-button> </div> </el-dialog> </div> </template>
3.2我们在父组件UserInfo中引入子组件AddUserInfo.vue,
<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> //使用这个组件， import AddUser from './AddUserInfo.vue' //引入组件 components:{ //注册 AddUser, }
3.3通过点击父组件的添加按钮触发子组件弹出框
dialogAdd是我们在父组件定义的的，需要传递给子组件，
<el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
在data定义用于是否弹出添加弹出框，默认false不弹出，只有点击添加按钮的时候才弹出弹出框
dialogAdd:{ show:false },
methods方法中
hanldeAdd(){ //添加 this.dialogAdd.show = true; //弹出对话框 },
3.4子组件需要接受父组件传递的方法.并请求数据。实现添加
<script> export default { name: 'AddUser', props:{ dialogAdd:Object }, data () { return { formDate:{ date:'', name:'', email:'', title:'', evaluate:'', state:'' }, formrules:{ date:[{required:true,message:"日期不能为空",trigger:"blur"}], name:[{required:true,message:"用户名不能为空",trigger:"blur"}], email:[{required:true,message:"邮箱不能为空",trigger:"blur"}], } } }, methods:{ dialogFormAdd(formdong) { this.$refs[formdong].validate((valid) => { if (valid) { this.$axios.post('http://localhost:3000/data',this.formDate).then(res => { this.$message({ type:"success", message:"添加信息成功" }) this.dialogAdd.show = false; this.$emit('update'); }) this.formDate = "" } else { console.log('error submit!!'); return false; } }) } } } </script>
this.$emit('update'); 子组件数据发生改变了，父组件视图却没有更新，这时候通过子创父，this.$emit,想父组件发送子组件传递的方法，
<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> @update="getUserInfo" //接受子组件传递过来的方法去更新视图
4.实现删除
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
删除数据需要根据id去删除，使用es6模板字符串进行拼接
handleDelete(index,row) { // 删除用户信息 this.$axios.delete(`:3000/data/${row.id}`).then(res =>{ this.$message({ type:"success", message:"删除信息成功" }) this.getUserInfo() //删除数据，更新视图 }) },
5.实现编辑功能
在这里添加弹出框内容和编辑弹出框内容一模一样，可以选择进行封装，封装成一个组件，添加和编辑共同使用这一个组件，根据自定义一个字段来判断点击 的是添加还是编辑按钮。在本次案例中，没有封装，如果想封装的话，可以自己尝试封装组件，来提高效率。
5.1页面搭建EditUser.vue组件，也是当做一个子组件，在父组件中去引入这个子组件，并把获取的数据展示到页面中。
<template> <div> <el-dialog title="编辑用户信息" :visible.sync="dialogEdit.show"> <el-form :model="form" ref="formEdit" label-width="100px" :rules="formrules"> <el-form-item label="日期" prop="date"> <el-date-picker v-model="form.date" type="date" placeholder="选择日期"> </el-date-picker> </el-form-item> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item label="标题" prop="title"> <el-input v-model="form.title"></el-input> </el-form-item> <el-form-item label="评价" prop="evaluate"> <el-input v-model="form.evaluate"></el-input> </el-form-item> <el-form-item label="状态" prop="state"> <el-input v-model="form.state"></el-input> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogEdit.show = false">取 消</el-button> <el-button type="primary" @click="dialogFormEdit('formEdit')">确 定</el-button> </div> </el-dialog> </div> </template>
在父组件中定义好需要传递的数据字段
dialogAdd:{ //编辑弹出框，默认是false show:false }, form:{ //编辑信息 date:'', name:'', email:'', title:'', evaluate:'', state:'' },