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') } }) }) }