vue結合Element UI如何實現表格數據的刪除操做

1、Element UI中表格數據的刪除

1. 在表格數據的刪除按鈕下，進行綁定刪除事件，removeUserById()。在這個是事件中，傳入當前項的id值，經過scope.row.id就能夠得到當前項的id值，代碼以下：

<!-- 刪除按鈕 -->
    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
複製代碼

2. 在method中，定義removeUserById()方法，傳入id。在點擊刪除按鈕之後，能夠給一個消息提示，判斷用戶是否決定刪除，能夠引用Element UI中的MessageBox彈框。咱們能夠在引入MessageBox之後，進行原型掛載，代碼以下：

Vue.prototype.$confirm = MessageBox.confirm
複製代碼

3. 在method中定義的removeUserById(id)方法中，使用MessageBox組件。因爲this.$confirm的返回值是一個promise對象，因此可使用async和await進行簡化操做。若是用戶確認刪除，則返回值爲字符串 confirm。若是用戶取消刪除，則返回值爲字符串 cancel。在用戶確認刪除之後，調用刪除的api，傳入當前項的id值。若是狀態碼不爲200，說明刪除失敗，反之則刪除成功。而後給一個刪除成功的提示，更新數據列表，代碼以下：

// 根據id對應的用戶信息
    async removeUserById (id) {
      // 彈框詢問用戶是否刪除數據
      const confirmResult = await this.$confirm('此操做將永久刪除該用戶, 是否繼續?', '提示', {
        confirmButtonText: '肯定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消刪除'
        })
      })

      // 若是用戶確認刪除，則返回值爲字符串 confirm
      // 若是用戶取消刪除，則返回值爲字符串 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消刪除')
      }

      const {data: res} = await this.$http.delete('users/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error('刪除用戶失敗！')
      }
      this.$message.success('刪除用戶成功！')
      this.getUserList()
    }
複製代碼

2、Element UI中表格數據的刪除實現

1. Element UI中表格數據的刪除實現，完整代碼以下：

<template>
    <div>
        <!-- 麪包屑導航區域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
            <el-breadcrumb-item>用戶管理</el-breadcrumb-item>
            <el-breadcrumb-item>用戶列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片視圖區域 -->
        <el-card class="box-card">
            <!-- 搜索與添加區域 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="請輸入內容" v-model="queryInfo.query" clearable @clear="getUserList()">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="dialogVisible=true">添加用戶</el-button>
                </el-col>
            </el-row>
            <!-- 用戶列表區域 -->
            <el-table :data="userList" :stripe="true" :border="true">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="username" label="用戶名稱"></el-table-column>
                <el-table-column prop="email" label="郵箱"></el-table-column>
                <el-table-column prop="mobile" label="電話"></el-table-column>
                <el-table-column prop="role_name" label="角色"></el-table-column>
                <el-table-column prop="mg_state" label="狀態">
                    <template slot-scope="scope">
                        <!-- scope.row 能夠取到當前一行的數據 -->
                        <!-- {{ scope.row }} -->
                        <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操做">
                    <template slot-scope="scope">
                        <!-- 修改按鈕 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
                        <!-- 刪除按鈕 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
                        <!-- 分配角色按鈕 -->
                        <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分頁區域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>

        <!-- 添加用戶的對話框 -->
        <el-dialog title="添加用戶" :visible.sync="dialogVisible" width="50%" @close="addDialogClosed">
            <!-- 內容的主體區域 -->
            <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="70px">
                <el-form-item label="用戶名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密碼" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="郵箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手機號" prop="mobile">
                    <el-input v-model="addForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部區域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">確 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改用戶的對話框 -->
        <el-dialog title="修改用戶" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
          <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
            <el-form-item label="用戶名">
              <el-input v-model="editForm.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="郵箱" prop="email">
              <el-input v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手機" prop="mobile">
              <el-input v-model="editForm.mobile"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">確 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script> export default { data () { // 驗證郵箱的校驗規則 var checkEmail = (rule, value, callback) => { // 驗證郵箱的正則表達式 const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ if (regEmail.test(value)) { // 驗證經過，合法的郵箱 return callback() } // 驗證不經過，不合法 callback(new Error('請輸入合法的郵箱')) } // 驗證手機號的驗證規則 var checkMobile = (rule, value, callback) => { // 驗證手機號的正則表達式 const regMobile = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/ if (regMobile.test(value)) { // 驗證經過，合法的手機號 return callback() } // 驗證不經過，不合法 callback(new Error('請輸入合法的手機號')) } return { // 獲取用戶列表的參數對象 queryInfo: { // 查詢參數 query: '', // 當前的頁碼數 pagenum: 1, // 每頁顯示多少條數據 pagesize: 2 }, // 獲取的用戶列表 userList: [], // 總數 total: 0, // 控制添加用戶對話框的顯示與隱藏，默認爲隱藏 dialogVisible: false, // 添加用戶的表單數據 addForm: { username: '', password: '', email: '', mobile: '' }, // 添加表單的驗證規則對象 addFormRules: { username: [ { required: true, message: '請輸入用戶名', trigger: 'blur' }, { min: 3, max: 10, message: '長度在 3 到 10 個字符', trigger: 'blur' } ], password: [ { required: true, message: '請輸入密碼', trigger: 'blur' }, { min: 3, max: 10, message: '長度在 6 到 15 個字符', trigger: 'blur' } ], email: [ { required: true, message: '請輸入郵箱', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' } ], mobile: [ { required: true, message: '請輸入手機號', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' } ] }, // 控制修改用戶對話框的顯示與隱藏，默認爲隱藏 editDialogVisible: false, // 查詢到的用戶信息對象 editForm: {}, // 修改表單的驗證規則對象 editFormRules: { email: [ { required: true, message: '請輸入郵箱', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' } ], mobile: [ { required: true, message: '請輸入手機號', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' } ] } } }, created () { this.getUserList() }, methods: { async getUserList () { const {data: res} = await this.$http.get('users', { params: this.queryInfo }) if (res.meta.status !== 200) { return this.$message('獲取用戶列表失敗！') } this.userList = res.data.users this.total = res.data.total console.log(res) }, // 監聽 pageSize 改變的事件 handleSizeChange (newSize) { // console.log(newSize) // 將監聽接受到的每頁顯示多少條的數據 newSzie 賦值給 pagesize this.queryInfo.pagesize = newSize // 修改完之後，從新發起請求獲取一次數據 this.getUserList() }, // 監聽 頁碼值 改變的事件 handleCurrentChange (newPage) { // console.log(newPage) // 將監聽接受到的頁碼值的數據 newPage 賦值給 pagenum this.queryInfo.pagenum = newPage // 修改完之後，從新發起請求獲取一次數據 this.getUserList() }, // 監聽 switch 開關狀態的改變 async userStateChange (userInfo) { console.log(userInfo) const {data: res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`) if (res.meta.status !== 200) { // 更新失敗，將狀態返回初始狀態 this.userInfo.mg_state = !this.userInfo.mg_state this.$message.error('更新用戶狀態失敗！') } this.$message.success('更新用戶狀態成功！') }, // 監聽添加用戶對話框的關閉事件 addDialogClosed () { this.$refs.addFormRef.resetFields() }, // 點擊按鈕，添加新用戶 addUser () { this.$refs.addFormRef.validate(async valid => { // 若是valid的值爲true，說明預校驗成功，反之則校驗失敗 // console.log(valid) // 校驗失敗 if (!valid) return // 校驗成功，能夠發起添加用戶的網絡請求 const {data: res} = await this.$http.post('users', this.addForm) if (res.meta.status !== 201) { this.$message.error('添加用戶失敗！') } this.$message.success('添加用戶成功！') // 隱藏添加用戶的對話框 this.dialogVisible = false // 從新獲取用戶列表數據 this.getUserList() }) }, // 展現編輯用戶的對話框 async showEditDialog(id) { // console.log(id) const {data: res} = await this.$http.get('users/' + id) if (res.meta.status !== 200) { return this.$message.error('查詢用戶信息失敗！') } this.editForm = res.data this.editDialogVisible = true }, // 監聽修改用戶對話框的關閉 editDialogClosed () { this.$refs.editFormRef.resetFields() }, // 修改用戶信息而且提交 editUserInfo () { this.$refs.editFormRef.validate(async valid => { console.log(valid) if (!valid) return // 發起修改用戶信息的數據請求 const {data: res} = await this.$http.put('users/' + this.editForm.id, { email: this.editForm.email, mobile: this.editForm.mobile }) if (res.meta.status !== 200) { return this.$message.error('更新用戶信息失敗！') } // 關閉對話框 this.editDialogVisible = false // 更新數據列表 this.getUserList() // 提示修改爲功 this.$message.success('更新用戶信息成功！') }) }, // 根據id對應的用戶信息 async removeUserById (id) { // 彈框詢問用戶是否刪除數據 const confirmResult = await this.$confirm('此操做將永久刪除該用戶, 是否繼續?', '提示', { confirmButtonText: '肯定', cancelButtonText: '取消', type: 'warning' }).catch(() => { this.$message({ type: 'info', message: '已取消刪除' }) }) // 若是用戶確認刪除，則返回值爲字符串 confirm // 若是用戶取消刪除，則返回值爲字符串 cancel if (confirmResult !== 'confirm') { return this.$message.info('已取消刪除') } // 發起刪除用戶信息的數據請求 const {data: res} = await this.$http.delete('users/' + id) if (res.meta.status !== 200) { return this.$message.error('刪除用戶失敗！') } // 提示刪除成功 this.$message.success('刪除用戶成功！') // 更新數據列表 this.getUserList() } } } </script>

<style lang="less" scoped> </style>

複製代碼