VUE的饿了么组件实现批量删除

批量删除不是很好做吗？

对 是很好做。但是对于新手来说，还是需要一点时间去理解

因为，饿了么的多选checkbox只有一行。。。那么怎么取值呢？

对。有一个方法

handleSelectionChange (val) {
  //val 为选中数据的集合
  this.multipleSelection = val
}

没错。就是它

废话不多说，上代码

<el-table ref="multipleTable" :data="tableData" align="center" stripe style="width: 100%" @selection-change="handleSelectionChange" >

</el-table>

<el-button plain @click="allDle()">批量删除</el-button>
<el-button @click="toggleSelection(tableData)">全选</el-button>
<el-button @click="toggleSelection()" :disabled="multipleSelection.length == 0">取消选择</el-button>

data () {
  return {
    multipleSelection: [],    //定义一个初始化数组
    isdisable:false   //确定选择框是否可选的选项
  }
}

 

 

//全选,取消选择
toggleSelection (rows) {
  if (rows) {
    rows.forEach (row => {
      this.$refs.multipleTable.toggleRowSelection(row);
    });
  } else {
    this.$refs.multipleTable.clearSelection();
  }
},
handleSelectionChange (val) {
  //val 为选中数据的集合
  this.multipleSelection = val
},
// 批量删除
allDle () {
  let comments = this.multipleSelection
  let num = []
  for (let i = 0;i<comments.length;i++) {
    num.push(comments[i].comment_id)
    console.log(num)
  }
  // 写this.$axios
  this.$axios.get(this.$host + 'allDle.do', {params: {'commentsId':num}})
    .then(resp => {
      console.log(resp.data)
      console.log(comments.length)
      for (let j = 0;j<comments.length;j++){
        this.tableData.splice(comments[j], 1)
      }
      this.toggleSelection()
    })
}

由于用户选择项不定，有多种可能，向后台传值用数组

所以控制台接受的值为[‘?’,’?’,’?’]这种形式

控制台写法

//批量删除用户的评论
function myallDle(req,res){
    let param=req.query.commentsId;
    let sql="DELETE FROM commentmy where comment_id in("
    for (let i=0;i<param.length-1;i++){
        sql += " ?,"
    }
    sql+="?)"
    function cb(err,data) {
        // console.log(data)
        res.send("。。。还是不想返回")
    }
    commentproModel.myalldle(sql,param,cb)
}