vue element-UI 批量删除

说明：我做的批量删除是获得到文件或者是文件夹的路径，路径使用逗号隔开，然后删除

1.首先在el-table的标签中添加一个事件@selection-change="selsChange",还得在批量删除的标签中写上:disabled="this.sels.length === 0"

<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>
      <el-table-column prop="label" label="文件名" align="left" class="fa fa-file-code-o">
        <template slot-scope="scope">
          <i :class="fileIcon"  style="font-size: 16px;color: orange;" v-if="scope.row.type === 'directory'"></i>
          <i :class="imgIcon" style="color: #8B90A0;" v-else-if="scope.row.type === 'image'"></i>
          <i :class="htmlIcon" style="font-size: 14px;color: #000;" v-else></i>
          <span @click="openFile(scope.row)" style="cursor: pointer;">{{ scope.row.label }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="size" label="大小" align="center"></el-table-column>
      <el-table-column prop="lastUpdate" label="最后修改时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <div slot-scope="scope">
          <el-button type="success" class="fa fa-edit" plain @click="reNameFile(scope.$index, scope.row)"></el-button>
          <el-button type="danger" class="fa fa-trash-o" plain
                     @click="deleteFile(scope.$index, scope.row)"></el-button>
        </div>
      </el-table-column>
    </el-table>
 <re-name-dialog ref="reNameDia"></re-name-dialog>
    <div class="footer">
      <div class="">
        <el-button @click="deleteFileOrDirectory(sels)" :disabled="this.sels.length === 0"> 批量删除</el-button>
      </div>
    </div>

2.然后去实现这个事件

selsChange(sels) {
        this.sels = sels
      }

3.看到sels没有定义，我们在return中定义一下sels

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

4.写批量删除的事件在导入接口的时候参数就写paths:path

deleteFileOrDirectory() {
        let path = this.sels.map(item => item.path).join()//获取所有选中行的path组成的字符串，以逗号分隔
        console.log(path)
        this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deleteFileOrDirectory({paths:path}).then(result => {
            let {data} = result
            console.log("批量删除")
            let flag = this.$config.executeResult(data)
            if (flag) {
              this.$message.success(data.operationContentDetails)
              this.$emit('reloadTree')
            }
          })
        })
      }