19.職位批量刪除操作

阿新 • • 發佈：2020-08-08

給服務端新增一個批量刪除的介面

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: '已取消刪除'
                    });
                });
            },