ElementUI实现表单中删除功能（单个删除 批量删除）

批量删除时，必须至少选中一个多选框，否则需要提示未选中

批量删除使用多选框请参考

批量删除按钮

<el-button @click="batchDelNotice()" v-if="userRole==1" type="danger" size="mini" round><i
        class="el-icon-delete"></i> 批量删除
</el-button>

单个删除按钮

<el-table-column
        label="操作"
        fixed="right"
        :render-header="tableAction"
        width="120"
        align="center">
    <template slot-scope="scope">
        <!--单个编辑按钮-->
        <el-button @click="editModifyNotice(scope.row)" type="primary" icon="el-icon-edit" size="small"
                   circle></el-button>
        <!--单个删除按钮-->           
        <el-button @click="deleteNotice(scope.row.noticeId)" v-if="userRole==1" type="danger"
                   icon="el-icon-delete" size="small"
                   circle></el-button>
    </template>
</el-table-column>

使用解释

v-if="userRole==1"  
为判断是否的超级管理员 只有超级管理员才有删除权限
在用户登录后，将用户角色存入sessionStorage中；在进入本页面时，在mounted中获取即可判断

批量删除函数方法

 // 批量删除
batchDelNotice() {
    let app = this;
    if (this.multipleSelection == '') {
        app.$notify({
            title: '温馨提示：',
            message: '您未选中公告，请重新操作！！！',
            type: 'warning'
        });
        return;
    }
    let checkArr = app.multipleSelection;  // multipleSelection存储了勾选到的数据
    let ids = '';
    checkArr.forEach(function (item) {
        ids += item.noticeId + ','; // 添加所有需要删除数据的id到一个数组，post提交过去
    })
    let params = {
        ids: ids
    }
    app.$confirm('确定删除这些公告吗?', '批量删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        app.$Api.deleteBatchNotice(params, function (result) {
            if (result.result == "true") {
                app.$notify({
                    title: '温馨提示：',
                    message: '批量公告' + result.message,
                    type: 'success'
                });
                app.queryNoticeList();
                app.multipleSelection = '';
            } else {
                app.$notify.error({
                    title: '温馨提示：',
                    message: '批量公告' + result.message
                });
            }
        });
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消删除'
        });
    });
}

单个删除函数方法

  // 单个删除
deleteNotice(noticeId) {
     let app = this;
     var deleteData = {
         noticeId: noticeId
     }
     app.$confirm('确定删除该公告吗', '删除公告', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'error'
     }).then(() => {
         app.$Api.deleteNotice(deleteData, function (result) {
             if (result.result == "true") {
                 app.$notify({
                     title: '温馨提示：',
                     message: '公告' + result.message,
                     type: 'success'
                 });
                 app.queryNoticeList();
             } else {
                 app.$notify.error({
                     title: '温馨提示：',
                     message: '公告' + result.message
                 });
             }
         });
     }).catch(() => {
         //取消操作
         app.$message({
             type: 'info',
             message: '已取消删除'
         });
     });
 },