文章目录
一.新增接口../api/updateuser
用于修改用户信息
1.vue.config.js中添加一个修改用户信息的接口:../api/updateuser
/****updateusers接口:修改前台提交的用户信息****/
app.get('/api/updateuser', (req, res) => {
const {
id, username, password, email, mobile,pagenum, pagesize } = req.query
if (userlist) {
userlist.filter(u => u.id == id).forEach(element => {
element.UserName = username
element.Email = email
element.Mobile = mobile
})
}
var total = userlist.length
if (pagenum == 0) {
newDataList = userlist.slice(pagenum * pagesize, (parseInt(pagenum) + 1) * pagesize)
} else
newDataList = userlist.slice((parseInt(pagenum) - 1) * pagesize, pagenum * pagesize)
res.json({
'status': 'ok',
'total': total,
'data': newDataList
})
});
二."修改信息"弹出框的实现
2.新建一个el-dialog标签,作为修改信息的对话框
<!--修改用户信息对话框-->
<el-dialog
title="修改用户信息"
:visible.sync="updateUserDialogVisible"
width="40%"
@close="updateDialogClosed"
>
<el-form ref="updateFormRef" :rules="addFormRules" :model="updateForm" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="updateForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="updateForm.password" disabled></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="updateForm.email"></el-input>
</el-form-item>
<el-form-item label="电话" prop="mobile">
<el-input v-model="updateForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="updateUserDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="updateUser">确 定</el-button>
</span>
</el-dialog>
3.加入数据结构:在data中声明控制对话框显示和隐藏的变量
updateUserDialogVisible: false,
三.把该弹出框绑定给卡片区中的"添加"和"删除"按钮
4.对卡片区中的"操作"中的两个按钮:"添加"和"删除"绑定点击事件
(注意区分卡片区"操作"选项中的两个按钮"添加"和"删除",与两个弹出框中的"确定"和"取消"按钮的区别)
绑定前:
<el-table-column label="操作">
<!-- 插入两个按钮:添加和删除,先写死 -->
<template>
<el-button size="mini" type="success">添加</el-button>
<el-button size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
绑定后:
<template slot-scope="scope">
<el-button size="mini" type="success" @click="updateUserDialog(scope.row)">添加</el-button>
<el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
</template>
使用到了作用域插槽
5."添加"和"删除"绑定的点击事件实现相应功能
// 函数updateUserDialog:修改用户数据
updateUserDialog(userInfo) {
this.updateUserDialogVisible = true
this.updateForm.id = userInfo.id
this.updateForm.username = userInfo.UserName
this