Vue-ele中使用el-table实现商品列表

Posted 2023-03-28

参考技术A <template>

  <div>

    <h1>goods</h1>

    <el-button type="danger" plain @click="del">批量删除</el-button>

    <!-- 提示框的颜色 有light和dark -->

    <el-table

      :data="tableData"

      tooltip-effect="dark"

      @selection-change="handleSelectionChange"

      :row-key="row=>row.goods_id"

    >

      <el-table-column

        type="selection" width="55"

        :reserve-selection="true"

      >

      </el-table-column>

      <el-table-column

        prop="add_time"

        label="添加时间"

        width="120"

      ></el-table-column>

      <el-table-column prop="goods_id" label="商品id" width="120">

        <template slot-scope="scope">

          <el-tag> scope.row.goods_id </el-tag>

        </template>

      </el-table-column>

      <el-table-column

        prop="goods_name"

        label="商品名称"

        show-overflow-tooltip

      ></el-table-column>

      <el-table-column prop="goods_number" label="商品数量" width="120">

      </el-table-column>

      <el-table-column prop="goods_price" label="商品价格" width="120">

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

import menusGet, delDelete from "@/http/request.js";

export default

  data()

    return

      pagenum: 1,

      pagesize: 10,

      query: "",

      tableData: [],

      multipleSelection: [],

    ;

  ,

  methods:

    handleSelectionChange(val)

      this.multipleSelection = val;

    ,

    /* 批量删除 */

    del()

      console.log(delDelete);

      .then(()=>

         this.multipleSelection.forEach((r,i) =>

            console.log(r.goods_id)

            delDelete(`goods/$r.goods_id`,

              id:r.goods_id

            ).then((res) =>

              let meta = res.data;

              if(meta.status==200&&(i+1)==this.multipleSelection.length)

                this.$message.success(meta.msg)

                /* 删除数据后，重新渲染页面 */

                this.showTable();

             

            );

          );

      )

      /* 点击取消走catch */

      .catch(()=>

        this.$message.warning('谢谢你的手下留情')

      )

    ,

    showTable()

      menusGet("goods",

        pagenum: this.pagenum,

        pagesize: this.pagesize,

        query: this.query,

      )

        .then((res) =>

          console.log(res);

          let meta, data = res.data;

          if (meta.status == 200)

            this.tableData = data.goods;

         

        )

        .catch((err) =>

          console.log(err);

        );

    ,

  ,

  created()

    this.showTable();

  ,

;