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