vue+element+node如何批量刪除

今天下午研究了一下 方法較簡單
前端是vue+element框架 后端node.js

前端:

<el-table-column type="selection" width="55"></el-table-column>
然后給table加個方法 @selection-change="handleSelectionChange"
然后在data中定義兩個空數(shù)組接受
tableChecked: [],
     ids: [],

methods定義一個方法
handleSelectionChange(val) {
     this.tableChecked = val
你可以console.log(val) 看看有沒有選中到值
   },

然后創(chuàng)建1個批量刪除的按鈕
<el-col :span="24">
     <el-button type="primary" :disabled="this.tableChecked.length === 0"  @click="batchDelete(tableChecked)">批量刪除</el-button>
   </el-col>

放在table外面

然后給這個按鈕定義方法

methods里面

async batchDelete() {
     var ids = this.tableChecked.map(item => item._id).join()
     this.$confirm('確定要批量刪除這些文章嗎', "提示", {
       confirmButtonText: "確定",
       cancelButtonText: "取消",
       type: "warning"
     })
       .then(async () => {
         // const res = await this.$http.delete('del/'+ids);
         await this.$http.delete('del/'+ids);
         this.$message({
           type: "success",
           message: "刪除成功!"
         });
         this.fetch();
       })
       .catch(() => {
         this.$message({
           type: "info",
           message: "已取消刪除"
         });
       });
   },
接口自己修改






后端

app.delete('/admin/api/del/:id', async (req, res) => {
        const delId = req.params.id.split(',')
        await Article.remove({ _id: { $in: delId } });
        res.send({
            success: true
        })
    })




?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 基于Vue的一些資料 內(nèi)容 UI組件 開發(fā)框架 實用庫 服務(wù)端 輔助工具 應(yīng)用實例 Demo示例 element★...
    嘗了又嘗閱讀 1,175評論 0 1
  • UI組件 element- 餓了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的組件庫 m...
    柴東啊閱讀 15,876評論 2 140
  • UI組件 element- 餓了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的組件庫 m...
    小姜先森o0O閱讀 9,615評論 0 72
  • UI組件 element- 餓了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的組件庫 m...
    你猜_3214閱讀 11,160評論 0 118
  • UI組件 element- 餓了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的組件庫 m...
    王喂馬_閱讀 6,484評論 1 77