设置表格的复选删除功能

添加新接口：

export const goodsGet = (path="",params={})=> httpServe({path,params});

export const goodsDelete = (path="")=> httpServe({path,method:'delete'});

应用ele表格

 <el-button type="danger" plain @click="del">批量删除</el-button>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="商品名称" prop="goods_name"></el-table-column>
      <el-table-column prop="goods_id" label="商品id" width="80">
      </el-table-column>
      <el-table-column prop="goods_price" label="商品价格" width="80">
      </el-table-column>
      <el-table-column prop="goods_number" label="商品数量" width="80">
      </el-table-column>
    </el-table>

配置表格并渲染数据：

import { goodsGet, goodsDelete } from "@/http/request.js";

data() {
    return {
      tableData: [],
      chooseGoods: [],
      pagenum: 1,
      pagesize: 10,
    };
  },
  created() {
    this.showTable();
  },
  methods: {
    showTable() {
      goodsGet("goods", {
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      })
        .then((res) => {
          let { meta, data } = res.data;
          if (meta.status == 200) {
            console.log(res.data);
            this.tableData = data.goods;
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.chooseGoods = val;
    },
    del() {
      this.$confirm("确定要删除吗")
      .then(() => {
        this.chooseGoods.forEach((r, i) => {
          goodsDelete("goods/" + r.goods_id).then((res) => {
            if (res.data.meta.status == 200 && (i + 1) == this.chooseGoods.length) {
              console.log(1)
              this.$message.success(res.data.meta.msg)
              this.showTable();
            }
          });
        });
      })
      .catch(err=>{
        this.$message.error(err)
      });

    },
  },
  activated() {
    console.log("商品列表激活了");
  },
  deactivated() {
    console.log("离开了商品列表");
  },