vue---批量刪除表格數據

效果圖：

1.表格中加入選擇框

<el-table-column type="selection" align="center" width="50"></el-table-column>

2.el-table中加入【 @selection-change="handleSelectionChange"】事件

selection-change

當選擇項發生變化時會觸發該事件

selection

 

//<template>中
<el-button icon="el-icon-delete" size="mini" @click="deleteUserInfo(clientData)">批量刪除</el-button>

 <!-- 刪除對話框 -->
    <el-dialog title="刪除" :visible.sync="deleteUserFormVisible" width="30%" class="deleteUserForm">
      <span>用戶刪除後不可恢復,是否繼續?</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="deleteUserFormVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitDeleteUser">確 定</el-button>
      </span>
    </el-dialog>

 //data中
 data(){
multipleSelection: [],
deleteIds: [],
deleteUserFormVisible: false,
}


//methods中
// 獲取選擇項-多選刪除
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

// 批量刪除數據
    deleteUserInfo(rows) {
      this.deleteUserFormVisible = true;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        var j = i;
        var id = this.multipleSelection[j].id;
        this.deleteIds.push(id);
      }
//this.deleteIds 要刪除的數據的id數組
      this.deleteIds = this.deleteIds.toString();
    },

// 提交刪除用戶
    submitDeleteUser() {
      this.deleteMenuFormVisible = false;
      let param = {
        token: this.$store.state.token,
        userIds: this.deleteIds
      };
//clientDelete爲接口
      clientDelete(param).then(res => {
        if (res.data.respCode == "00000") {
          this.$message.success(res.data.respDesc);
        } else {
          this.$message.error(res.data.respDesc);
        }
        this.reload();
      });
    },