Vue + ElementUI的电商管理系统实例06 删除用户

1、弹出提示框询问是否删除数据

MessageBox 弹框组件

确认消息：提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。

$confirm需要先进行挂载：

在element.js里引入

import { MessageBox } from 'element-ui';

Vue.prototype.$confirm = MessageBox.confirm

给删除按钮添加点击事件：根据id

<!--删除按钮-->
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeUserById(scope.row.id)"></el-button>

removeUserById方法：

// 根据ID删除对应的用户信息
async removeUserById(id) {
      console.log(id)
      // 弹框 询问用户是否删除
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      console.log('确认删除')
}

效果图：

这时候点击取消，会弹出提示“已取消删除” ，若是点确定，会在控制台打印“确认删除”。

当然也可以用element官方给的示例.then .catch：

removeUserById(id) {
     this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
     }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
     }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
     })
}

2、调用api接口完成删除用户数据

删除单个用户：请求路径：users/:id    请求方法：delete

// 根据ID删除对应的用户信息
async removeUserById(id) {
      console.log(id)
      // 弹框 询问用户是否删除
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      // console.log('确认删除')
      const { data: res } = await this.$http.delete('users/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error('删除用户失败')
      }
      this.$message.success('删除用户成功')
      this.getUserList()
}

// 或者
removeUserById(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('users/' + id).then(res => {
          if (res.data.meta.status !== 200) {
            return this.$message.error('删除用户失败')
          }
          this.getUserList()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
}

实现删除功能后刷新列表。

推送到云端：

新建一个终端，输入git branch查看分支，发现当前在master分支上，下面新建user分支：

git checkout -b user

查看状态：

git status

添加到暂存区：

git add .

提交：

git commit -m "完成用户列表功能的开发"

推送到远程：

git push -u origin user
//本地仓库推送到远程origin仓库的user分支

然后合并分支：

先切换到maser分支：

git checkout master

合并分支user到master：

git merge user

再推送到远程：

git push