Vue element UI batch deletion

Note: the bulk deletion I do is to obtain the path to the file or folder. The path is separated by commas and then deleted

1. First, add an event @ selection change = "selschange" to the label of El table, and write in the label of batch deletion: 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="file name" 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="Size" align="center"></el-table-column>
      <el-table-column prop="lastUpdate" label="Last modified" align="center"></el-table-column>
      <el-table-column label="operation" 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"> Batch deletion</el-button>
      </div>
    </div>

2. Then implement this event

selsChange(sels) {
        this.sels = sels
      }

3. See that sels is not defined. Let's define sels in return

export default {
    data(){
      return{
        sels: [],//Selected value display
      }
    }
}

4. Write the batch deletion event. When importing the interface, the parameter will write paths:path

deleteFileOrDirectory() {
        let path = this.sels.map(item => item.path).join()//Gets a comma separated string of path s for all selected lines
        console.log(path)
        this.$confirm('This action will permanently delete the file and its children, Whether to continue?', 'Tips', {
          confirmButtonText: 'Determine',
          cancelButtonText: 'cancel',
          type: 'warning'
        }).then(() => {
          this.$api.deleteFileOrDirectory({paths:path}).then(result => {
            let {data} = result
            console.log("Batch deletion")
            let flag = this.$config.executeResult(data)
            if (flag) {
              this.$message.success(data.operationContentDetails)
              this.$emit('reloadTree')
            }
          })
        })
      }

 

Added by ThinkGeekness on Sun, 15 Dec 2019 21:58:56 +0200