2022-07-13 vue项目-通用后台管理系统(十一) 用户数据的删除——新建后台删除用户接口，前台“删除”按钮绑定点击事件并实现逻辑功能,项目完整代码,req的常用属性

1.添加一个删除用户的接口./api/deleteuser

        /****deleteusers接口:删除前台提交的用户信息****/
        app.get('/api/deleteuser', (req, res) => {
   
          const {
    id, query, pagenum, pagesize } = req.query;
          if (userlist) {
   
              for (var i = 0; i < userlist.length; i++) {
   
                  if (userlist[i].id == id)
                      userlist.splice(i, 1)
              }
          }                    
          var total = userlist.length;                 
          newDataList = userlist.slice((parseInt(pagenum) - 1) * pagesize, pagenum * pagesize); 
          res.json({
   
              'status': 'ok',
              'total': total,
              'data': newDataList
          });
      });

2.给卡片区的"删除"按钮绑定点击事件

<el-button type="info" size="mini" @click="deleteUser(scope.row.id)">删除</el-button>

3.实现绑定的点击事件deleteUser

   // 函数deleteUser:点击"删除"按钮,删除用户数据    
    async deleteUser(id) {
   
      var idInt = 'id'
      var idVal = id
      this.queryinfo[idInt] = idVal
      //console.log(this.queryinfo)
      var res = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
   
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {
   
        return err
      });
      //console.log(res)
      if (res != 'confirm') return this.$message.info('删除用户已取消')
      const resData = await this.$http.get('/api/deleteuser', {
   
        params: this.queryinfo
      });
      this.getuserlist();
      this.$message.info('删除用户成功');
      this.userList = resData.data.data;
      this.total = resData.data.total;
    },

4.效果

添加用户:

修改用户:

删除用户:

5.完整代码

Users.vue

<template>
  <div class="users">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-d-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 1.搜索框 -->
      <!-- row属性:gutter表示栅格间隔 -->
      <el-row :gutter="20">
        <!-- col属性:span表示栅格占据的列数 -->
        <el-col :span="8">
          <!-- 搜索框绑定点击事件search:绑在它的子标签放大镜插槽上 -->
          <!-- clearable属性:清空按钮是否出现 -->
          <el-input v-model="queryinfo.query" :clearable="true" placeholder="请输入内容">
            <!-- 注意这个el-button标签是写在el-input标签内部的子标签 -->
            <!-- 如此它才能绑定input的slot的相关属性值 -->
            <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showAddUserDialog">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 2.用户列表渲染 -->
      <el-table :data="userlist" style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="80px"
        ></el-table-column>
        <el-table-column
          label="用户名"
          prop="UserName"
          width="100px"
        ></el-table-column>
        <el-table-column
          label="手机"
          prop="Mobile"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="邮箱"
          prop="Email"
          width="200px"
        ></el-table-column>
        <!-- 状态:在状态栏中添加开启/关闭图标按钮 -->
        <el-table-column label="状态" prop="MgState" width="100">
          <!-- 使用到了作用域插槽 -->
          <template slot-scope="dfdf">
            <el-switch
              v-model="dfdf.row.MgState"
              active-color="#13ce66"
              @change="userState(dfdf.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <!-- 添加和删除按钮 -->
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="updateUserDialog(scope.row)">添加