美文网首页
蓝桥到家第三课

蓝桥到家第三课

作者: 风中凌乱的男子 | 来源:发表于2022-10-07 16:50 被阅读0次

    接第二课继续往下说,下面讲调用批量删除接口删除商品

    /**
     * /api/del/all/goods 批量删除商品
     */
     export function delAllShopFun(data) {
      return request({
        url: '/api/del/all/goods',
        method: 'delete',
        data
      })
    }
    
    • 然后复制delShopFun方法,在需要的页面引入进来
    import { delAllShopFun } from "@/api/user";
    
    • 方法引入后,放在那待用,既然要执行批量删除商品,根据后端接口文档要求,要传给后端key为ids,value为要删除商品的id数组的json对象,即如下:
    {
       "ids":["62f5f109c30baf69c6bd8c61","62f5f10ac30baf69c6bd8c63"]
    }
    
    • 既然要传id数组,那就要先拿到我们选择的商品数据,table表格给我们提供了一个方法,找到element-ui文档的多选表格
    image.png
    • 有一个方法 叫 selection-change,给表格绑定这个方法@selection-change="handleSelectionChange",当你多选后,会触发handleSelectionChange方法,会回调你选中的数据数组,如下
    <el-table
         :data="tableData"
         style="width: 100%"
         size="small"
         border
         @selection-change="handleSelectionChange"
         :height="tableHeight"
         >
         ......
         ......
         ......
    </el-table>
    
    methods:{
      handleSelectionChange(e){ 
          console.log(e);
      }
    }
    
    image.png
    • 可以看到,此方法回调的是一组你选中的数据数组,后端需要的是一组id数组,那么我们就要使用方法,把id拿出来,组装成id数组,这里使用map方法
    data() {
        return {
          ids:[],//定义一个空数组
        };
      },
    
    handleSelectionChange(e){
          console.log(e);
          this.ids = e.map(item=>{
            return item._id //返回每条数据的_id
          })
          console.log(this.ids);
        }
    
    • 既然我们拿到了id数组,下面就可以继续开发点击【批量删除】按钮触发调用批量删除的接口了
    <el-button type="danger" size="small" icon="el-icon-delete" @click="handelDelAll">批量删除</el-button>
    
    handelDelAll(){
          if(this.ids.length==0){
            alert("请先选中要删除的商品")
            return
          }
          delAllShopFun({ids:this.ids}).then(res=>{
            alert("删除成功")
            this.getShopListFun()
          })
        }
    

    继续往下说,下面讲实现switch开发控制商品上下架,调用update接口

    • switch开发有个event事件 change
    change  switch 状态发生变化时的回调函数
    
    • 给switch开关绑定一个change事件,该事件回调一个新状态的值
    <el-switch
       v-model="scope.row.status"
       :active-value="1"
       :inactive-value="2"
       active-color="#13ce66"
       inactive-color="#eee"
       @change="changeSwitch"
       >
     </el-switch>
    
    changeSwitch(e){
       console.log(e);
    }
    
    image.png
    • 打开接口文档找到修改商品的接口路径/api/update/goods/:id,注意:id是动态参数,拼接到接口路径后面的
    • 打开src/api/user.js文件,新建一个修改商品信息的接口
    /**
     * /api/update/goods/:id 更新商品信息
     */
     export function updateShopFun(data,id) {
      return request({
        url: '/api/update/goods/'+id,
        method: 'put',
        data
      })
    }
    
    • 然后在需要的页面 引入 updateShopFun方法
    import { updateShopFun } from "@/api/user";
    
    • 然后在changeSwitch方法内调用该方法,根据文档传status参数给到后端,因为changeSwitch回调的是新状态的值,我们要拿到新状态的值和这条数据的id,所以要覆盖changeSwitch默认的回调
    <el-switch
       v-model="scope.row.status"
       :active-value="1"
       :inactive-value="2"
       active-color="#13ce66"
       inactive-color="#eee"
       @change="changeSwitch(scope.row)"
       >
     </el-switch>
    
    • 然后这样调用
    changeSwitch(e){
          console.log(e);
          updateShopFun({status:e.status},e._id).then(res=>{
            alert('更新成功')
          })
        }
    

    相关文章

      网友评论

          本文标题:蓝桥到家第三课

          本文链接:https://www.haomeiwen.com/subject/skfbartx.html