• Vue+element 商品列表、新增、编辑、删除业务实现

    整体和用户列表 类似 功能步骤有：

    1. 面包屑导航
    2. 外部是大的卡片组件
    3. 搜索商品 添加商品
    4. 表格渲染数据
    5. 作用域插槽用于 操作按钮
    6. 分页器组件的使用 

    不一样的点：之前编辑信息 新增信息是 弹出对话框编辑 但商品信息内容较多 我们跳转到一个组件、并且进行商品编辑的时候要进行路由传参 来渲染初始数据

    点击添加商品按钮时跳转到新增商品组件对应路径：

    addGoods(){

            this.$router.push('/goods/add')

    }

     点击编辑商品按钮时跳转到编辑商品组件对应路径 并且传入id

    ToEditGoods(id){
      this.$router.push(`/goods/edit/${id}`)
    }

    新增商品和编辑商品组件布局一致只是新增商品 不用 传参请求数据

    我们以编辑商品为例

    在设置路由对应关系的时候 预留占位符

    {
  path:'/goods',
  component:GoodsList
},
{
  path:'/goods/add',
  component:GoodsAdd
},
{
  path:'/goods/edit/:id',
  component:GoodsEdit
}

     第一步 先使用组件进行页面布局：

    主要使用到了 el-steps 步骤条组件 和 el-tabs 标签页组件的联动 使他们步长一致 使用共同的

    active  步骤条的active 动态绑定 到 activeIndex上

    当标签页发生切换时 根据name 赋值给 activeIndex

    async handleClick(){
   this.activeIndex = this.activeName * 1
   // 选择了商品(动态)参数选项
 },

    这样 两个组件就可以联动展示了 

    标签页组件其实是包裹在 el-form 当中方便统一提交给服务器

    接下来就是表单内部 组件渲染  表单验证了

    基本信息

    组件渲染el-input  数据绑定 v-model 类型限制 tpye=‘number’  prop合法值验证

    这里需要自定义验证的是  商品价格不能小于0  商品数量必须是整数

    必填就可以直接使用自带的

      

     基本信息中还有一个要点：分类选择

    1.           <el-form-item label="选择商品分类">
    2. el-cascader 级联选择器
    3.             <el-cascader
    4. 默认选定的值是根据id请求过来的分类数组
    5.               v-model="AddGoodsForm.goods_cat"
    6.               style="width: 400px"
    7. 数据来源：cateLists 一进入页面请求过来的
    8.               :options="cateLists"
    9. 有清空按钮
    10.               clearable
    11. 禁用 编辑页面 不让修改分类
    12.               disabled
    13. 级联选择器的相关规则
    14.               :props="CSet"
    15. 选择发生改变时 执行的回调
    16.               @change="handleChange">el-cascader>
    17.           el-form-item>
    18.  
    19.  
    20. <script>
    21. 数据来源：
    22.       async getAllCate(){
    23.         const {data:res} = await this.$http.get('categories')
    24.         if (res.meta.status !==200) return this.$Msg.error('获取商品分类列表失败！')
    25.         this.cateLists = res.data
    26.       }
    27.  
    28. 级联选择器的规则
    29.         CSet:{
    30. 展示下一级触发方式 鼠标悬浮
    31.           expandTrigger: 'hover',
    32. 指定选项的子选项为选项对象的某个属性值
    33.           children:'children',
    34. 显示的文本
    35.           label:'cat_name',
    36. 文本对应的value
    37.           value:'cat_id',
    38.         }
    39.  
    40.  
    41. 选择发生改变时 执行的回调  只让选择第三级  不是的话就清空 选择不进去
    42.       handleChange(){
    43.         if (this.AddGoodsForm.goods_cat.length !== 3){
    44.           this.AddGoodsForm.goods_cat = []
    45.         }
    46.         console.log(this.AddGoodsForm.goods_cat)
    47.       }
    48.  
    49.  
    50.  
    51.