2022-07-12 vue项目-通用后台管理系统(十) 用户数据的修改——“修改用户”对话框的显示和隐藏,点击卡片区数据选项“修改“和“删除“实现对应功能,对话框的“取消“和“确定“按钮实现

一.新增接口../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
      t