实现批量删除功能的vuelelement表示例代码

最近写了一个批量删除功能，遇到很多坑。我在此记录下来

该表的代码如下

复制代码如下： El-table @ row-click=' handlecurrentchange ' @ selection-change=' selschange ' ref=' table ' 3360 data=' page data ' stripe : default-sort=' { prop : ' createAt '，order: '降序' }' @sort-change='sortChange '

如图所示，表格的前面有一个复选框

代码很简单

El-table-column类型=' selection ' width=' 65 '/El-table-column删除按钮代码如下：

复制代码如下： El-button v-show=' mode=' list ' ' class=' small ' type=' warning ' size=' small ' @ click=' remove batch(sellers)' : disabled=' this。卖家。长度==0 | |这

数据代码如下：

data() { return { pageSize: 12，total: 0，pageData: []，query: ' '，sort: 'createAt '，order: '降序'，Defaultsnap3360src回退，accept: ' '，ws: null，sels: []，//检查显示的值disabled : true }；}表中的视频数据来自pageData，每个视频都是一个对象。当对象的状态属性等于等待或有进度属性时，视频正在转码或准备转码，因此不允许删除。批量删除意味着将选定的行添加到sellers数组中，用数组中每个对象的id属性形成一个数组，并将其发送到后端。此外，正在转码的视频不允许删除，此时该按钮被禁用。

根据官方文件，@ selection-change=' sellers change '是复选框选择发生变化时触发的事件。

向方法添加方法

sels change(sels){///所选行组成一个数组this.sels=sels//遍历(let元素的)数组。sales){//如果视频正在转码或等待转码，请禁用按钮并结束If(元素)方法。status==' waiting' | |元素。进度){这个。disabled=true返回；}//如果没有正在转码或等待转码的视频，按钮可以使用此项。this.disabled=false}}将请求发送到后端，代码如下：

removeBatch(行){ var id=[]；成排。foreach(元素={ids。push(元素。id)})这个。$ confirm('您确定要删除所选文件吗？'、“提示”)。然后(()={$。post ('/VOD/removebatch '，{ ids: ids })。然后(达拉={这个。update data()；}) }).catch(()={ })；}正在转码的视频已被前端排除。后端可以根据前端传来的数据直接删除视频吗？

答案是否定的，后端也要验证

想法是从前端获取数据后，遍历数组两次。如果您发现有一个视频是第一次转码，抛出异常，将不会进入第二个循环。第二个循环将根据id删除视频。

代码如下

r.post('/removeBatch '，async(req，RES)={ var ids=req . body . ids；var files=utils . VOD . get(' files ')；//在第一个循环中，如果有正在转码的文件，抛出异常，结束(let id of ids){ var translation=trans . agent . translation[id]的循环；If(翻译){抛出新错误('无法删除正在转码的文件')；返回；} }//如果没有转码后的文件，输入第二个循环为(let id of ids){ var files=utils . VOD . get(' files ')；var row=files.find({id: id})。cloneDeep()。value()；//如果没有要删除的内容，结束if(！row){ RES . SendStatus(200)；返回；} var dir=path . dirname(row . path)；var name=path.basename(row.path，path . extname(row . path))；var transDir=path.resolve(dir，name)；//如果(fs . exist sync(row . path)){ fs . remove sync(row . path)，则删除源文件；}//如果(fs . exist sync(trans dir)){ fs . remove sync(trans dir)，则删除转码后的文件；}//删除json文件记录files.remove ({id:id})。write()；} RES . SendStatus(200)；})以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。