element table 实现表格批量删除

前言:不安逸,不浮躁,牛B就是一个学习累积的过程!

在写项目中遇到的坑记录一下,只是个前端小白。虽然很简单的一个问题,但是也耽误了很久的时间~记录一下~

-----上代码

   <el-button
    type="primary" size="small"    
    @click="removeBatch()"
    :disabled="this.sels.length === 0||this.disabled">删除</el-button>
  <el-table
          ref="multipleTable"
          :data="tableData"
          :header-cell-style="tableHeaderColor"
          :row-class-name="tableRowClassName" border
          style="width: 100%"
          @selection-change="selsChange">
          <el-table-column type="selection">
          </el-table-column>
 </el-table>
  data() {
            return {
                disabled: true,
                sels: [],//被选中的记录数据-----对应“批量删除”传的参数值
          }

------在methods中

   //选中数据
            selsChange(sels) {
             this.sels = sels
              //遍历选中的数组
              for (let tableData of this.sels) {
                    this.disabled = false
                }
                let length = this.sels.length
            },
    removeBatch() {
                let ids = this.sels.map(item => item.id).join()
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(async () => {
                        let {status} = await Commodity.remove({ids}); //删除事件
                        console.log(ids)
                        if (status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'

                            })
                            this.loadList();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            }

你可能感兴趣的:(vue)