后台管理系统11

Revin050

已于 2022-07-16 10:38:35 修改

阅读量648

点赞数 1

分类专栏：后台管理系统文章标签： vue.js javascript 前端 vue

于 2022-04-05 21:25:57 首次发布

本文链接：https://blog.csdn.net/qq_45847016/article/details/123973297

版权

后台管理系统专栏收录该内容

17 篇文章 2 订阅

订阅专栏

文章目录

SkuForm的操作

SkuForm的操作

SkuForm静态组件

首先书写一下SkuForm的静态组件，当用户在SPU模块中点击添加Sku的时候，页面应该跳转到SkuForm页面。
在这里插入图片描述
首先给这个绿色按钮绑定一个点击事件，当点击时，进行跳转，接下来书写页面。

静态布局代码如下所示，其中有个新的知识点el-table-column type="selection"这个type会变成勾选框，之前通常用的是Index序号。具体布局代码如下所示

<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="SPU名称"> 海绵宝宝 </el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称"></el-input> </el-form-item
      ><el-form-item label="价格(元)">
        <el-input placeholder="价格(元)"></el-input> </el-form-item
      ><el-form-item label="重量(千克)">
        <el-input placeholder="重量(千克)"></el-input> </el-form-item
      ><el-form-item label="规格描述">
        <el-input type="textarea" rows="4" placeholder="规格描述"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item label="屏幕尺寸">
            <el-select value="" placeholder="请选择">
              <el-option label="label" value="value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item label="屏幕尺寸">
            <el-select value="" placeholder="请选择">
              <el-option label="label" value="value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table style="width: 100%" border>
          <el-table-column type="selection" label="label" width="80">
          </el-table-column
          ><el-table-column prop="prop" label="图片" width="width">
          </el-table-column
          ><el-table-column prop="prop" label="名称" width="width">
          </el-table-column
          ><el-table-column prop="prop" label="操作" width="width">
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="label">
        <el-button type="primary">保存</el-button>
        <el-button >取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

页面效果如下所示
在这里插入图片描述

获取SkuForm数据

首先书写接口，这里要注意请求数据的时候同样不能放在SkuForm挂载完成的时候，这里同样是通过Spu组件来操作SkuForm发送请求。首先给SkuForm组件打个ref，接下来父组件通过ref操作子组件。
在这里插入图片描述

书写完接口后，发现接口有需要四个参数，而父组件含有这四个参数的数据，因此可以在父组件利用ref控制子组件的时候顺便将数据传递过去。子组件接收数据发请求，并且存储数据。
在这里插入图片描述

展示SKU与收集SKU数据

当用户点击新建sku的时候，我们应该收集用户的输入，将数据收集完成后当用户点击保存的时候我们可以把这些数据带给接口，从而实现保存。为了收集接口能用的数据，首先查看接口所需数据的格式，然后根据该格式进行数据收集。
在这里插入图片描述

图片的展示与收集

之前已经请求到了图片的数据，首先去el-table中将这些图片进行展示，如下所示
在这里插入图片描述
效果如下所示。

接下来设置当用户勾选前面的勾选框时，将数据进行存储。这里用到了一个事件selection-change，这个事件是当选择项发生变化的时候触发。将该事件绑定给table。当选择框发生变化，将数据存储到data中。