說明:我做的批量刪除是獲得到文件或者是文件夾的路徑,路徑使用逗號隔開,然後刪除
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')
}
})
})
}