19.職位批量删除操作

給服務端添加一個批量删除的接口

Controller

因為是删除多個，是以id可以以數組的形式傳過來，可以以字元串傳過來

@DeleteMapping("/")
    public RespBean deletePositionsByIds(Integer[] ids){
        if (positionService.deletePositionsByIds(ids) == ids.length) {
            return RespBean.ok("删除成功");
        }
        return RespBean.error("删除失敗");
    }

           

Service

public Integer deletePositionsByIds(Integer[] ids) {
        return positionMapper.deletePositionsByIds(ids);
    }
           

Mapper

<delete id="deletePositionsByIds">
    delete from position
    where id in
    <foreach collection="ids" item="id" separator="," open="(" close=")">
      #{id}
    </foreach>
  </delete>
           

前端添加一個批量删除按鈕

表格下添加一個danger的按鈕

<el-table :data="positions"
          border
          size="small"
          stripe
          style="width: 70%">
    <el-table-column
            type="selection"
            width="55">
    </el-table-column>
          <el-table-column
              prop="id"
              label="編号"
              width="55">
          </el-table-column>
    <el-table-column
            prop="name"
            label="職稱編号"
            width="180">
    </el-table-column>
    <el-table-column
            prop="createDate"
            width="120"
            label="建立時間">
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
                    size="mini"
                    @click="showEditView(scope.$index, scope.row)">編輯</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
    </el-table-column>
</el-table>
<div>
    <el-button type="danger" size="small" style="margin-top: 8px">批量删除</el-button>
</div>

           

檢視多選表格元件的寫法

@selection-change="handleSelectionChange"> 就是多選的回調方法
           

添加多選回調

@selection-change="handleSelectionChange"

<el-table :data="positions"
          border
          size="small"
          stripe
          style="width: 70%"
          @selection-change="handleSelectionChange">
    <el-table-column
            type="selection"
            width="55">
    </el-table-column>
          <el-table-column
              prop="id"
              label="編号"
              width="55">
          </el-table-column>
    <el-table-column
            prop="name"
            label="職稱編号"
            width="180">
    </el-table-column>
    <el-table-column
            prop="createDate"
            width="120"
            label="建立時間">
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
                    size="mini"
                    @click="showEditView(scope.$index, scope.row)">編輯</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
    </el-table-column>
</el-table>
           

script methods 回調函數将選中的資料添加到數組中 是以也需要在data中添加一個空數組

data(){
            return{
                multipleSelection: []
            }

           

handleSelectionChange(val) {
                this.multipleSelection = val;
            }

           

通過數組的長度來判斷是否選擇了 如果沒有選 如果沒有選則disabed為true即不可用的。當然必須要加 [ : ] 這是vue的v-bind的縮寫 這樣後面的字元串就是一個表達式了。

<div>
                <el-button @click="deleteMany" type="danger" size="small" style="margin-top: 8px" :disabled="multipleSelection.length == 0">批量删除</el-button>
            </div>

           

最後看批量删除的click事件

要傳給批量删除的接口是一個數組

通過對ids多次的等于 ids變成數組

這裡的forEach拼接出來的ids是:ids=1&ids=2&ids=3&

這樣就表示ids數組有三個元素分别是1，2，3

服務端删除成功後重新加載表格資料

methods:{
            deleteMany(){
                this.$confirm('此操作将永久删除【'+ this.multipleSelection.length +'】條記錄, 是否繼續?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = '?';
                    this.multipleSelection.forEach(item=>{
                        ids += 'ids=' + item.id + '&';
                    })
                    this.deleteRequest("/system/basic/pos/" + ids).then(resp => {
                        if (resp) {
                            this.initPositions();
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

           

效果圖