vue+element表格批量删除

vue+element表格批量删除

// 按钮
 <el-row style="padding: 10px 5px;float: left;">
        <el-col
          :span="3"
        ><el-button
          type="primary"
          size="small"
          @click="delectAll()"
        >批量删除</el-button></el-col>
      </el-row>

// 表格
<el-table
      class="customer-table"
      :data=" tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)  "
      @selection-change="handleSelectionChange"   //获取到多选框的列
    ></el-table>

函数methods中添加
// 批量删除
    delectAll() {
      for (let i = 0; i < this.tableData.length; i++) {
        const element = this.tableData[i]
        element.id = i
      }
      if (this.multipleSelection.length == 0) this.$message.error('请先至少选择一项')
      this.multipleSelection.forEach(element => {
        this.tableData.forEach((e, i) => {
          if (element.id == e.id) {
            this.tableData.splice(i, 1)
          }
        })
      })
    },
    // 选择框
    handleSelectionChange(val) {
      this.multipleSelection = val
    },