vue+element的表格實現批量刪除功能
阿新 • • 發佈:2019-01-30
最近寫了一個批量刪除功能,遇到了不少坑,特此記錄一下
表格的程式碼如下
<el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" stripe :default-sort="{prop: 'createAt', order: 'descending'}" @sort-change="sortChange">
如圖所示,表格最前面有一個複選框
程式碼很簡單
<el-table-column type="selection" width="65"></el-table-column>
刪除按鈕的程式碼如下:
<el-button v-show="mode == 'list'" class="small" type="warning" size="small" @click="removeBatch(sels)" :disabled="this.sels.length === 0||this.disabled">批量刪除</el-button>
data的程式碼如下:
data() {
return {
pageSize: 12,
total: 0 ,
pageData: [],
query: '',
sort: 'createAt',
order: 'descending',
defaultSnap: srcFallback,
accept: '',
ws: null,
sels: [],//選中顯示的值
disabled:true
};
}
表格中的視訊資料來自於pageData,每個視訊都是一個物件,物件的status屬性等於waiting或者有progress屬性時,此視訊正在轉碼,或者正在準備轉碼,不允許刪除,
批量刪除就是把被選中的行新增到sels這個陣列中,把數組裡的每一個物件的id屬性組成一個數組,傳送給後端,此外,正在轉碼的視訊不允許刪除
根據官方文件,
@selection-change="selsChange"
是複選框選擇改變時觸發的事件 在methods中新增一個方法
selsChange(sels) {
//被選中的行組成陣列
this.sels = sels;
//遍歷被選中行數所組成的陣列
for(let element of this.sels){
//如果視訊正在轉碼或者等待轉碼,禁用按鈕,結束方法
if(element.status == 'waiting'||element.progress){
this.disabled = true;
return;
}
//如果沒有視訊正在轉碼或者等待轉碼,按鈕可用
this.disabled = false;
}
}
把請求傳送給後端,程式碼如下:
removeBatch(rows){
var ids = [];
rows.forEach(element =>{
ids.push(element.id)
})
this.$confirm('確定要刪除選中的檔案嗎?','提示').then(() =>{
$.post('/vod/removeBatch',{
ids:ids
}).then(dara =>{
this.updateData();
})
}).catch(()=>{});
}
前端已經排除正在轉碼的視訊了,後端是否能根據前端傳來的資料,直接刪除視訊呢?
答案是不可以,後端一樣要做驗證
思路是,拿到前端傳來的資料後,遍歷陣列兩次,第一次如果發現有正在轉碼的視訊,丟擲異常,不會進入第二次迴圈,第二次迴圈才根據id刪除視訊
程式碼如下
r.post('/removeBatch',async(req,res) => {
var ids = req.body.ids;
var files = utils.vod.get("files");
//第一次迴圈,如果有正在轉碼的檔案,就丟擲異常,結束迴圈
for(let id of ids){
var transing = trans.agent.transing[id];
if(transing){
throw new Error('正在轉碼的檔案無法刪除');
return;
}
}
//如果沒有轉碼的檔案,進入第二次迴圈
for(let id of ids){
var files = utils.vod.get("files");
var row = files.find({id: id}).cloneDeep().value();
//如果沒有要刪除的,就結束
if(!row) {
res.sendStatus(200);
return;
}
var dir = path.dirname(row.path);
var name = path.basename(row.path, path.extname(row.path));
var transDir = path.resolve(dir, name);
//刪除原始檔
if(fs.existsSync(row.path)){
fs.removeSync(row.path);
}
//刪除轉碼檔案
if(fs.existsSync(transDir)){
fs.removeSync(transDir);
}
//刪除json檔案記錄
files.remove({id: id}).write();
}
res.sendStatus(200);
})