vue+element实现批量删除

表格代码如下：主要是    @selection-change="selsChange"

<el-table ref="singleTable" v-loading="loading" :data="tableData" stripe
              style="margin-top: 15px" @selection-change="selsChange">
 <el-table-column
    type="selection"
    width="55" >
 </el-table-column>  //复选框
 <el-table-column label="#" type="index" width="60"></el-table-column>  //id
</el-table>

定义显示值

 data(){
      return{
        sels: [],//选中的值显示
      }
    }

选中时触发

selsChange(sels) {
    this.sels = sels 
},

批量删除按钮   disabled设置是否可用  

 <el-button @click="deleteFileOrDirectory(sels)" :disabled="this.sels.length === 0"> 批量删除</el-button>

绑定事见

 deleteFileOrDirectory() {
        var ids= this.sels.map(item => item.id).join()//获取所有选中行的id组成的字符串，以逗号分隔
        console.log(ids)
        this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {      
            console.log("删除成功")
          })
        })
      }

后台解析

public HttpResult delete(@RequestParam String ids) {
	String[] ids= ids.split(",");
	system.out.println(ids)
}