尚品汇后台项目（一）-阿里云开发者社区

P1、项目介绍

后台管理系统不是后端技术

前台针对的是用户后台管理系统对应的是卖家

前台的数据来自于卖家可视化操作数据库

可以让用户操作可视化操作平台实现数据库的操作不同角色看到的操作的内容是不同的一般不需要注册

P2、后台管理系统模板介绍

使用托管github的模板文件

简洁版: https://github.com/PanJiaChen/vue-admin-template

加强版: https://github.com/PanJiaChen/vue-element-admin

模板的文件与文件夹认知【简洁版】

1.下载模板

https://github.com/PanJiaChen/vue-admin-template

2.下载依赖

npm i

3.运行项目

npm run dev package.json文件里面有写

报错解决：cnpm install --save core-js

4.文件夹介绍

build
     ----index.js webpack配置文件【很少修改这个文件】
mock
    ----mock数据的文件夹【模拟一些假的数据mockjs实现的】，因为咱们实际开发的时候，利用的是真是接口

node_modules
     ------项目依赖的模块

public
     ------ico图标,静态页面，publick文件夹里面经常放置一些静态资源，而且在项目打包的时候webpack不会编译这个文件夹，原封不动的打包到dist文件夹里面

src
    -----程序员源代码的地方
    ------api文件夹:涉及请求相关的
    ------assets文件夹：里面放置一些静态资源（一般共享的），放在aseets文件夹里面静态资源，在webpack打包的时候，会进行编译
    ------components文件夹：一般放置非路由组件获取全局组件
    ------icons这个文件夹的里面放置了一些svg矢量图
    ------layout文件夹：他里面放置一些组件与混入
    ------router文件夹：与路由相关的
    -----store文件夹：一定是与vuex相关的
    -----style文件夹：与样式先关的
    ------utils文件夹：request.js是axios二次封装文件****
    ------views文件夹：里面放置的是路由组件

App.vue:根组件
main.js：入口文件
permission.js:与导航守卫相关、
settings：项目配置项文件
tests：作者测试文件
.editorconfig：编程风格文件
.env.development ：webpack可以监测到的开发文件
.env.producation ：webpack可以监测到的上线文件
env.staging：webpack可以监测到的测试文件
上面三个文件都可以通过process.nev来获取到

5.setting.js文件配置

P3、登录业务完成

1.完成静态组件

找到src/views/login/index.vue进行修改

2.改写静态组件内容

2.1解决template爆红

2.2在assets文件内添加亦庄背景图

2.3 给最外面的类名添加背景图和平铺

注意css需要加入~才可以使用别名

2.4，修改文字

标题

登录按钮

文本框

其中elememt表单元素的

model是收集数据用的

rules是验证规则

3.改写vuex里面的actions方法

原先代码没有asyne await 现在和前台方法一样改写

改写后

4.书写api 换成真实的接口

本次使用线上文档

后台管理系统API接口在线文档：

http://39.98.123.211:8170/swagger-ui.html

http://39.98.123.211:8216/swagger-ui.html

把接口全部换成

5.改写axios的二次封装

修改请求拦截器的hearders头的字段为token这是定好的

修改响应拦截器的状态码判断为

6.配置代理跨域

搜索webpack里面的devserve 里面的proxy复制代码

ps：此处dialing的地址改为http://gmall-h5-api.atguigu.cn

 proxy: {
            '/dev-api': {
                target: 'http://39.98.123.211:8170',
                pathRewrite: { '^/dev-api': '' },
            },
        },

这里的/dev-api是生产模式的前缀

可以在.env.development文件里面进行修改注意一致就行

可以把二次封装的函数修改为

im service from ‘@/utils/request’

P4、退出登录

修改退出按钮的静态页面

src\layout\components\Navbar.vue

P5、路由的搭建

把路由删除到只剩下

注意路由写法：

一切基础基于Layout这个组件

/路径访问的是Layout组件先把大框架显示出来然后立马重定向到首页

title字段是显示的文字

icon字段是文字前面的图标

配置自己的路由

创建商品管理路由组件和子组件

配置路由

{
        path: '/product',
        name: 'Product',
        component: Layout,
        meta: { title: '品牌管理', icon: 'el-icon-goods' },
        children: [{
                path: 'tradeMark',
                name: 'TradeMark',
                component: () =>
                    import ('@/views/product/tradeMark/index'),
                meta: { title: '品牌管理' }
            },
            {
                path: 'attr',
                name: 'Attr',
                component: () =>
                    import ('@/views/product/Attr/index'),
                meta: { title: '平台属性管理' }
            },
            {
                path: 'sku',
                name: 'Sku',
                component: () =>
                    import ('@/views/product/Sku/index'),
                meta: { title: 'Sku管理' }
            },
            {
                path: 'spu',
                name: 'Spu',
                component: () =>
                    import ('@/views/product/Spu/index'),
                meta: { title: 'Spu管理' }
            },
        ]
    },

修改框架类名 index.scss

实现效果：

P6、品牌管理静态组件

vscode下载插件

vue-helper

element ui snipets

<template>
  <div>
    <!-- 按钮 -->
    <el-button type="primary" plain style="margin: 20px">+ 添加</el-button>
    <!-- 表格 -->
    <el-table border :data="data">
      <el-table-column
        label="序号"
        width="80px"
        align="center"
      ></el-table-column>
      <el-table-column label="品牌名称" width="width"></el-table-column>
      <el-table-column label="品牌logo"></el-table-column>
      <el-table-column label="操作"></el-table-column>
    </el-table>
       
    <el-pagination
      :current-page="5"
      :page-sizes="[5, 7, 9]"
      :page-size="100"
      layout=" prev, pager, next, jumper,->,sizes,total"
      :total="400"
      :pager-count="5"
      style="text-align: center;margin-top: 20px;"
    >
    </el-pagination>
  </div>
</template>

el-button 按钮

type：类型 string

icon：图标类名

el-table 表单

data：表格中将来需要展示的数据数组类型

border 添加竖线

配合el-table-column使用表示列表单列

label ：显示标题的内容

width：对应列的宽度

align：标题的对齐方式

prop：对应列的内容的字段名

el-pagination 分页器

@size-change=“handleSizeChange”

@current-change=“handleCurrentChange”

current-page:代表的是当前第几页

total：代表分页器一共需要展示数据条数

page-size：代表的是每一页需要展示多少条数据

page-sizes：代表可以设置每一页展示多少条数据

layout：可以实现分页器布局 -> 逗号隔开

pager-count:按钮的数量如果 9 连续页码是7

P7、品牌列表展示

1.书写自己的api接口

GET /admin/product/baseTrademark/p a g e / {page}/page/{limit}

需要参数page当前页 limit每页展示的数据

在api文件夹只留下user.js

创建文件夹 product

在product文件夹创建四个文件，分别管理trademark、attr、spu、sku

在trademark.js引入封装过后的axios函数

导出自己的接口函数

对接口进行统一管理

/api/index.js

把所有模块的函数进行管理

注意写法：import * as xx from xxx 把里面的所有函数进行导入

模块导出

挂载到原型上面 main.js 默认引入index.js

在mounted生命周期请求函数

初始页码和每页展示的数据

组件挂载发请求

data准备接收总数据和el-table绑定的data

获取数据显示在table

<el-table border :data="list" >
      <el-table-column
        label="序号"
        width="80px"
        align="center"
        type="index"
      ></el-table-column>
      <el-table-column label="品牌名称"  width="width" prop="tmName"></el-table-column>
      <el-table-column label="品牌logo">
        <template slot-scope="{row,$index}">
          <img :src="row.logoUrl" alt="" style="width:90px;height:50px">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row,$index}">
          <el-button size="mini" type="info" icon="el-icon-edit">修改</el-button>
          <el-button size="mini" type="warning" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

el-table

:data=“list” 绑定的总数据

el-table-column

label=“序号” 列的标题

width=“80px” 宽度

align=“center” 局中方式

type=“index” 序号

prop=“tmName” 每列显示的data.tmName

作用域插槽固定写法 row返回的是父组件绑定data.xx

分页器的数据动态绑定

 <el-pagination
      :current-page="page"
      :page-sizes="[5, 7, 9]"
      :page-size="limit"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
      :pager-count="5"

分页器的事件：

@current-change=“handleCurrentChange”

点击分页器的数字按钮的时候触发的事件第一个参数是点击的数字

@size-change=“handleSizeChange”

修改分页器每页显示多少数据的时候触发的事件第一个参数是选择后的每页展示的数据的数量

P8、添加品牌和修改品牌静态完成

点击添加按钮会出现遮罩层

使用el-dialog

title=“修改品牌” 左上角的文字

:visible.sync=“dialogFormVisible” dialogFormVisible变量控制是否显示和隐藏

把显示和隐藏的事件绑定在添加按钮和修改按钮上面

目前只做静态页面

重构对话框

    <el-dialog title="修改品牌" :visible.sync="dialogFormVisible">
      <el-form >
        <el-form-item label="品牌名称">
          <el-input  autocomplete="off" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item label="品牌Logo">
          <!-- 上传 -->
          <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip" style="margin-left:80px">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        </el-form-item>
      </el-form>
      <div  class="dialog-footer" style="margin-left:500px">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

el-form

：model 把表单信息收集到哪里是一个对象

el-upload 上传

需要css样式也复制

:on-success=“handleAvatarSuccess”

上传前的回调

:before-upload=“beforeAvatarUpload”

上传后的回调

P9、添加品牌完成

添加品牌和修改品牌

收集品牌名称和品牌logo发请求存入数据库然后发请求获取到数据

1.书写api

因为添加和修改的api参数差不多唯一的区别就是传不传id

如果是添加的不需要传id 如果是修改的需要传id

一起封装为一个函数

2.收集元素的tmName和logoUrl

el-form

：model 把表单信息收集到哪里是一个对象

初始化一个对象来收集信息，对象的字段必须是tmName和logoUrl

收集品牌名称 form表单:model属性绑定要收集的对象的位置

输入框绑定tmName 收集品牌名称

收集品牌logo

不能用v-model因为不是表单元素

action=" " 文件上传的地址

:show-file-list=“false” 是否显示文件已经上传列表>

文件上传地址：/dev-api/admin/product/fileUpload

注意前面的/dev-api

{"code":200,"message":"成功","data":"http://139.198.127.41:9000/sph/20220918/user.jpg","ok":true}

图片上传成功之后还会返回图片的网络地址

在上传成功之后把这个地址传给img的地址

:on-success=“handleAvatarSuccess”

上传成功之后的回调

res返回上传成功的网络地址

file返回图片的信息

让trademark的logoUrl把地址存了并且根据这个来判断上传完成显示的图片和+号

这里tmName和logoUrl全部收集完毕

解决上传取消按钮的时候不能保留上次没有上传的文本信息和图片信息

在点击取消按钮的时候弹窗消失数据清空

点击确定发请求

P10、修改品牌完成

修改按钮传参传row 是本列的信息

然后把trademark修改为这些信息

现在直接点击修改按钮就可以获取到tmName和logoUrl

但是修改的时候还没有点确定就修改了解决：浅拷贝

点击完成发请求修改数据如果是修改就会传入id

修改$message的弹窗显示样式

修改from表单的title显示

如果是修改留在当前页如果是添加返回第一页

P11、品牌的表单校验（自定义校验规则）

内置规则

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可

1.el-form model绑定数据 relus是自内置规则

2.el-form-item prop绑定el-form的model字段的属性

3.配置内置规则 relus的属性值必须与el-form-item prop绑定字段一致

required 是否必须

message 提示文字

trigger 触发事件

所有表单验证都通过之后才能执行

1.form表单加入ref

2.refs.ruleForm.validate（回调函数（参数）=>{

if（参数全部通过）{

执行代码

}

}）

注意此时的asyne放在最近的回调函数前面

自定义表单校验规则

var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }


  rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],

写在data里面

写在表单验证的relus里面

P12、删除品牌操作

写api

使用message组件

请求成功进行再次请求如果当前页有数据留在当前页如果当前页没有数据返回当前页的前一页

P13、商品管理之三级联动静态组件

创建公共组件menus

里面写菜单的静态组件

<div>
    <el-form ref="form"  label-width="80px" style="display:flex">
  <el-form-item label="一级菜单">
    <el-select  placeholder="请选择一级菜单">
      <el-option label="区域一" value=""></el-option>
      <el-option label="区域一" value=""></el-option>
      <el-option label="区域二" value=""></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="二级菜单">
    <el-select  placeholder="请选择二级菜单">
      <el-option label="区域一" value=""></el-option>
      <el-option label="区域二" value=""></el-option>
      <el-option label="区域一" value=""></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="三级菜单">
    <el-select  placeholder="请选择三级菜单">
      <el-option label="区域一" value=""></el-option>
      <el-option label="区域二" value=""></el-option>
      <el-option label="区域一" value=""></el-option>
    </el-select>
  </el-form-item>
</el-form>
  </div>

挂载为全局组件

在attr.vue里面引入

 <el-card style="margin:20px">
      <menus></menus>
      </el-card>

el-card

会自己添加背景和背景颜色

P14、三级联动动态展示

写接口 get

获取一级菜单的信息

初始一个list1来接收数据

组件挂载的时候获取一级菜单的信息

遍历选项框

收集数据

 <el-form  :model="tmList">
  <el-form-item label="一级菜单">
    <el-select  placeholder="请选择一级菜单" v-model="tmList.category1id" @change="cate1idchange">
      <el-option :label="c1.name" :value="c1.id" v-for="(c1,index) in list1"  :key="c1.id" ></el-option>

把表单的数据收集到tmList里面

v-model数据双向绑定的是value的值也就是选项

初始list2和list3来进行接收获取来的数据

初始tmList来存获取到的选项的id值

el-select 添加事件如果选项改变的时候把选项的value收集到也就是id

根据这个id来发请求获取到新id来获取list3的数据

获取到数据来遍历选项框

P15、三级联动完成

解决bug

如果确定1id2id3id之后重新选择1id 2 3需要清空

如果确定1id2id之后重新选择2id 3需要清空

在选择第三个菜单的时候需要发请求显示下面的内容（平台属性）

因为menus组件是子组件 id值在子组件内需要传给attr父组件使用自定义事件父@ 子$emit 父组件data准备数据来进行存储

父组件获取到数据如何确定是1id/2id/3id 呢子组件传值的时候进行解构传入固定的字符串 level

父组件取值的时候也必须进行解构提取，注意kv一致

并且在一级菜单改变的时候重新传入1id 2/3id置空

并且在二级菜单改变的时候重新传入2id 3id置空

三个id全部获取到就会发请求

P16、平台属性动态展示属性

书写api

export const reqcategory3Listbuttom = (category1id, category2id, category3id) => {
    return request({
        url: `/admin/product/attrInfoList/${category1id}/${category2id}/${category3id}`,
        method: 'get'
    })
}

组件传递参数

 //获取平台属性请求
    async getAttrlist(){
      const {category1id,category2id,category3id} = this
     let res =  await this.$API.attr.reqcategory3Listbuttom(category1id,category2id,category3id)
     if (res.code==200) {
      this.list = res.data
      console.log(this.list);
     }
    },

在组件3个id全部获取到的时候执行这个函数

保存数据

初始化一个list数组

成功后赋值

使用数据

在attr组件内布局两个的div 加入v-show来进行动态切换

  <div v-show="isShow"> <el-card>
      <el-button icon="el-icon-plus" style="margin:20px 0" type="primary" @click="changeShow">添加属性</el-button>
      <el-table
    :data="list"
    stripe
    style="width: 100%"
    border
    >
    <el-table-column
      type="index"
      label="序号"
      width="80"
      align="center">
    </el-table-column>
    <el-table-column
      prop="attrName"
      label="属性名"
      width="180">
    </el-table-column>
    <el-table-column
      label="属性值列表"
      >
      <!-- //作用域插槽 -->
      <template slot-scope="{ row, $index }">
        <el-tag type="warning" v-for="item in row.attrValueList" :key="item.id" style="margin:0 20px">{{item.valueName}}</el-tag>
        </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="180"
      >
      <el-button type="warning" icon="el-icon-edit" @click="isShow=false"></el-button>
      <el-button type="info" icon="el-icon-delete"></el-button>
    </el-table-column>
  </el-table>
    </el-card></div>

静态组件显示

给添加按钮和修改按钮添加事件

来进行两个div的切换显示

P17、平台属性和修改属性静态完成

切换的静态组件

<div v-show="!isShow">
      <el-card>
        <el-form ref="form">
      <el-form-item label="属性名">
       <el-input placeholder="请输入属性名" style="width:300px" ></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" icon="el-icon-plus">添加属性值</el-button>
    <el-button @click="isShow=true">取消</el-button>
    <el-table
      style="width: 100%;margin:20px 0;" border>
      <el-table-column
        type="index"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        label="属性值名称"
       >
      </el-table-column>
      <el-table-column
      width="180"
      label="操作">
      </el-table-column>
    </el-table>
    <el-button type="primary">保存</el-button>
    <el-button @click="isShow=true">取消</el-button>
      </el-card>
    </div>

可以点击取消和添加来进行v-show的切换

P18、收集属性名的操作

写api

export const reqCategoryAttrName = (data) => {
    return request({
        url: '/admin/product/saveAttrInfo',
        method: "post",
        data
    })
}

初始化存储数据的格式

//收集添加属性的属性信息
      attrInfo: {
        attrName: "", // 属性名
        attrValueList: [
          //属性名中属性值，因为属性值可以是多个，因此需要的是数组
          {
            attrId: 0, //属性的id
            valueName: "", //属性值
          },
        ],
        categoryId: 0, //category3Id
        categoryLevel: 3,
      },
    };

收集属性名

form表单 model绑定attrInfo

inout输入框 v-model绑定attrInfo.attrName

表单输入的时候就可以收集到属性名的操作

P19、收集属性值操作

数据格式

{
  "attrName": "",      属性名
  "attrValueList": [   属性名中属性值，因为属性值可以是多个，因此需要的是数组
    {
      //"attrId": 0,          属性的id
      //"valueName": "string"  属性值
    }
  ],
  "categoryId": 0,    category3Id
  "categoryLevel":3,
}

一开始不能给attrId和valueName属性因为会直接出现一个表单

在点击的时候进行push 点击一次来出现一次 valuename绑定输入框

点击添加属性值按钮表格出现input表单

因为第一次没法获取到id 先传入undefined

作用域插槽 row

input表单v-model绑定的是attrInfo.attrName

属性名没有的情况禁用添加按钮

P20、解决返回按钮回显问题

点击取消按钮再次点击添加还会显示上次的内容

解决：把数据置空顺便获取到3id

P21、修改属性操作

对修改按钮添加点击事件

并且传递参数row

P22、查看模式和编辑模式的切换

添加按钮和修改按钮添加事件

里面添加一个自定义字段来控制每一列的span和input的切换

这里的flag字段是响应式的

因为数据已经初始化在data里面了 push方法也是响应式的

keyup 不是原生事件需要加入.native修饰符

span转化成块级元素增加点击范围

点击span 切换成input input失去焦点获取按下回车切换成span

P23、查看和编辑注意事项

防止用户输入空格

防止和之前的属性重复

row是最后一次输入的valueName

item是列表已经存在的valueName

P24、修改属性中的查看与编辑模式

修改属性获取到的row是没有flag字段的添加的时候才会把flag字段添加到attrinfo对象里面

添加响应式数据

$set(对象，要添加的响应式属性名，属性值)

P25、表单元素自动聚焦的实现

点击span 获取input节点让他聚焦

span添加点击事件

表单ref很多使用$index来识别

点击事件的回调

使用对象[‘属性名’]方法来进行枚举

点击添加让最后一项自动聚焦

添加属性值的回调添加

在数组的最后一项来进行聚焦

P26、删除属性值的操作

点击删除按钮弹出pop提示框静态

<template>
<el-popconfirm
  title="这是一段内容确定删除吗？"
>
  <el-button slot="reference">删除</el-button>
</el-popconfirm>
</template>

动态展示气泡弹出框显示的文字内容

点击取消气泡消失点击确定删除操作

确定按钮的回调文档中写confrim事件但是版本问题以前版本是onConfrim事件

数组中删除自身

P27、保存操作（暂未实现）

发请求接口已经写好了

点击保存的时候把参数整理之后向服务器发请求

P28、按钮与三级菜单的disabled

当切换为添加或者修改属性名的时候让三级菜单禁用

使用isShow数据和平台属性的切换一样但是需要父传子

传：

接：

如果没有属性名的情况下不能点击保存按钮

P29、SPU管理模块介绍

spu是类似于类的东西

sku是类似实例的东西

P30、完成SPU静态模块

三级菜单

使用全局组件menu 子组件的自定义事件是传入三级菜单的id

父组件进行接收和判断

下面的初始表单

<el-card>
      <el-button type="primary" icon="el-icon-plus" style="margin:20px 0">添加SPU</el-button>
      <el-table
      border
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="SPU名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="SPU描述">
      </el-table-column>
      <el-table-column
        label="操作">
        <template  slot-scope="{row,$index}">
        <el-button icon="el-icon-plus" type="success" size="mini"></el-button>
        <el-button icon="el-icon-edit" type="warning" size="mini"></el-button>
        <el-button icon="el-icon-info" type="info" size="mini"></el-button>
        <el-button icon="el-icon-delete" type="danger"  size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- @size-change="handleSizeChange"
      @current-change="handleCurrentChange" -->
    <el-pagination
    style="text-align:center"
      :current-page="1"
      :page-sizes="[3,5,10]"
      :page-size="100"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="400">
    </el-pagination>
    </el-card>

P31、动态展示SPU列表

api接口 page 当前第几页 limit每页展示数据 category3id

在3id获取完毕之后进行发请求的操作

初始化数据来进行接收

发请求来进行赋值操作

table 的data属性来绑定records数组每一列来绑定records的属性名注意次数不需要加入records. porp直接进行绑定显示

封装显示title的按钮

写一个公共组件注册为全局组件在el-button替换使用标签加入title属性

就可以显示有title的按钮了

el-button 全部换成hint-button 加入title字段

分页器处理

数据绑定回调绑定

第一个事件是点击数字按钮的回调第一个参数是当前点击的页码

可以获取spu列表的回调写在一起传入默认参数1 然后修改page参数

第二个事件是修改每页展示的数据的回调第一个参数是修改之后每页展示的数据

P32、spu管理内容的切换

左上添加按钮和修改按钮进入的是同一个页面内容

添加按钮

查看按钮

三个画面不能简单的使用布尔值来控制

初始化一个响应式属性

放置3个div来v-show

因为组件复杂把组件抽取为子组件来显示

P33、spuForm静态组件完成

两个按钮添加点击事件

没有三级分类的数据添加按钮不能使用

点击两个按钮的时候让控制的变量变为1

<template>
  <el-form ref="form" label-width="80px">
  <el-form-item label="SPU名称">
    <el-input placeholder="SPU名称"></el-input>
  </el-form-item>
  <el-form-item label="品牌">
    <el-select  placeholder="请选择品牌"  value="">
      <el-option label="区域一" value=""></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="SPU描述">
    <el-input type="textarea" placeholder="SPU描述" rows="4"></el-input>
  </el-form-item>
  <el-form-item label="SPU图片">
    <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
  </el-form-item>
  <el-form-item label="销售属性">
    <el-select  placeholder="还有3项未选择"  value="">
      <el-option label="区域一" value=""></el-option>
    </el-select>
    <el-button icon="el-icon-plus" type="primary">添加销售属性</el-button>
    <el-table
      style="width: 100%" border>
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="属性名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="属性名称列表">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
      </el-table-column>
    </el-table>
  </el-form-item>
  <el-form-item>
    <el-button type="primary">保存</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>
 data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }