5.2也是在方法中点击编辑按钮，在编辑中，点击拿一行，需要获取那一行的字段数据，并把获取的数据传递给子组件显示到弹出框中，需要肯据row，来获取每一行的数据。
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button<br> handleEdit(index,row){ //编辑 this.dialogEdit.show = true; //显示弹 this.form = { date:row.date, name:row.name, email:row.email, title:row.title, evaluate:row.evaluate, state:row.state, id:row.id } },
当我门打印row的是，就是点击哪一行的编辑按钮，对应的数据就好打印出来，这时候我们只需要把得到的数据传递给子组件就行
5.3父组件得到的数据，子组件通过props接受，和添加数据几乎一样
<script> export default { name: 'HelloWorld', props:{ dialogEdit:Object, form:Object }, data () { return { formrules:{ date:[{required:true,message:"日期不能为空",trigger:"blur"}], name:[{required:true,message:"用户名不能为空",trigger:"blur"}], email:[{required:true,message:"邮箱不能为空",trigger:"blur"}], } } }, methods:{ dialogFormEdit(formEdit) { this.$refs[formEdit].validate((valid) => { if (valid) { this.$axios.put(`:3000/data/${this.form.id}`,this.form).then(res => { this.$message({ type:"success", message:"编辑信息成功" }) console.log(res) this.dialogEdit.show = false; this.$emit('updateEdit') //更新父组件数据视图 }) } else { console.log('error submit!!'); return false; } }) } } } </script>
6查询数据
<el-form-item label="查询用户信息:"> <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input> </el-form-item>
6.1需要定义一个查询方法，通过filter对数组进行过滤，并返回一个新的数据，最后通过es6中includes方法，判断查询的条件是否包含，includes如果包含就返回true，如果不包含就返回false
searchUserinfo(keyUser) { return this.tableData.filter((user) => { if(user.name.includes(keyUser)) { return user } }) }
把定义好的方法，绑定到data,因为这个方法会返回一个新的数组
7.时间格式化
写到这个案例已经基本写完了，还是一些细节需要修改，比如我我们添加日期，页面显示并不是我们想要的。我门只想要右边的效果.
这时候推荐一个日期格式化插件moment.js,可以快速帮我们解决这个问题
7.1通过npm install moment --save下载
在main.js引入
import moment from 'moment'
我们定义一个全局过滤的filter,无论在那个组件都可以使用，主要调用moment
//获取年份 Vue.filter('moment', function (value, formatString) { formatString = formatString || 'YYYY-MM-DD HH:mm:ss'; return moment(value).format("YYYY-MM-DD"); // value可以是普通日期 20170723 });
8.全部代码
8.1UserInfo.vue组件代码
<template> <div> <h1>用户信息管理界面</h1> <el-row> <el-col :span="20" :push='2'> <div> <el-form :inline="true"> <el-form-item label="查询用户信息:"> <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input> </el-form-item> <el-form-item> <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button> </el-form-item> </el-form> </div> <div> <el-table :data="searchUserinfo(keyUser)" border> <el-table-column type="index" label="序号"> </el-table-column> <el-table-column label="日期"> <template slot-scope="scope"> <span>{{ scope.row.date | moment}}</span> </template> </el-table-column> <el-table-column label="姓名"> <template slot-scope="scope"> <span>{{ scope.row.name }}</span> </template> </el-table-column> <el-table-column label="邮箱"> <template slot-scope="scope"> <span>{{ scope.row.email }}</span> </template> </el-table-column> <el-table-column label="标题"> <template slot-scope="scope"> <span>{{ scope.row.title }}</span> </template> </el-table-column> <el-table-column label="评价"> <template slot-scope="scope"> <span>{{ scope.row.evaluate }}</span> </template> </el-table-column> <el-table-column label="状态"> <template slot-scope="scope"> <span>{{ scope.row.state }}</span> </template> </el-table-column> <el-table-column label="操作" fixed="right"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> </el-col> </el-row> <AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> <EditUser :dialogEdit="dialogEdit" :form="form" @updateEdit="getUserInfo"></EditUser> </div> </template> <script> import AddUser from './AddUser.vue' import EditUser from './EditUser.vue' export default { name: 'info', data () { return { tableData:[], dialogEdit:{ show:false, }, dialogAdd:{ show:false }, keyUser:"", form:{ //编辑信息 date:'', name:'', email:'', title:'', evaluate:'', state:'' }, } }, methods:{ getUserInfo() { this.$axios.get('http://localhost:3000/data').then(res => { console.log(res) this.tableData = res.data }) }, hanldeAdd(){ //添加 this.dialogAdd.show = true; }, handleEdit(index,row){ //编辑 this.dialogEdit.show = true; //显示弹 this.form = { date:row.date, name:row.name, email:row.email, title:row.title, evaluate:row.evaluate, state:row.state, id:row.id } console.log(row) }, handleDelete(index,row) { // 删除用户信息 this.$axios.delete(`:3000/data/${row.id}`).then(res =>{ this.$message({ type:"success", message:"删除信息成功" }) this.getUserInfo() //删除数据，更新视图 }) }, searchUserinfo(keyUser) { return this.tableData.filter((user) => { if(user.name.includes(keyUser)) { return user } }) } }, created(){ this.getUserInfo() }, components:{ AddUser, EditUser } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1{ font-size: 30px; color: #333; text-align: center; margin: 0 auto; padding-bottom: 5px; border-bottom: 2px solid #409EFF; width: 300px } </style>
8.2AddUserInfo.vue组件