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

<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()

  },

}

首先，新增个商品数量的加减功能组件，就叫cartcontrol.vue吧。新增个底部购物车组件，叫shopcart.vue吧。在good.vue中引入并注册组件。

cartcontrol.vue中，通过props来接收list对象

因为我在json中没有设置数量这个key，所以需要全局用vue.set进行注册这个属性。在add方法中，如果没有这个属性，那么就注册，如果有，那么就count++

这里增加了一点小效果。应用了<transition>。 并且当数量减到0的时候。通过v-show来控制减号和数值是否显示。

写的比较粗糙，估计只有我自己能懂。这里要注意一下，在BScroll实例中要配置下click:true。使better-scroll滚动部分支持点击事件。否则加减号的点击事件无效。好吧~下篇写下底部的购物车功能。

---