Vue+element-ui后台管理系统表单实现商品添加随笔总结（1）

1. 具体实现

1.1 <el-steps>

主要是用来控制每个tabs的流程

1.2 <el-tabs>

这里将form表单包裹在最外层的原因是，在tabs中有多个el-tab-pane项，且在每个项中有可能进行商品信息的增加或者修改，为了让多个项的修改信息统一上传，因此这里使用一个form表单包裹全部
tips：不能讲form表单作为el-tabs的子元素，因为tabs的直接子元素只能是el-tab-pane

在<el-tabs>中，v-model主要用来绑定选项卡中的name值，因此我们需要给每个选项卡<el-tab-pane>定义name值，当你切换的时候，v-model就会接收当前所切换的tab-pane的值（这样我们就可以根据这个name值去判断当前是哪个tab-pane然后执行相应的代码逻辑），因此这里我们为其绑定activeIndex变量，绑定activeIndex变量是为了让其于<el-steps>关联起来，对比steps中active接收number、而el-tabs的v-model接收string，因此我们在el-tab-pane的name绑定name="0",name="1...的形式，然后你切换的时候el-tabs可以接收“0"or"1"or....的方式，因此将绑定在data中的activeIndex变成字符串的形式，

问题，tab-step接收的是number？那我们怎么将"0"、“1”等字符串的形式转成数字类型呢？那很简单，直接在el-steps中使用 :active="activeIndex - 0"即可。这样便可以达到关联的效果。

2. 添加商品部分具体实现

2.0 这里先提一下包裹在最外层的<el-form>用法

2.1 商品表单

第一部分（商品信息）

这一部分主要是输入商品的基本信息和一个选择商品所属分类的选项，其中用到的是主要是<el-form-item>、<el-input>和<el-cascader>组件，主要难点是在于<el-cascader>，所以这里主要讲一下<el-cascader>级联选择器的使用：

关联的级联选择器重cateList数据结构如下：

在级联选择器重使用 @change="handleChange"来监听用户选择的变化

第二部分与第三部分（商品参数和商品属性）

此时需要进行tab的切换，但是这里业务做了一个约束条件，即当你不选择商品的分类时（即级联选择器项）不能进入第二个tab项，相关的逻辑如下：

然后第二部分主要是获取数据然后显示即可，这里主要说明一下商品参数下的电视机2下的属性项。首先先获取商品参数和商品属性数据，具体代码如下，当this.activeIndex === "2"的时候，获取商品参数信息，当this.activeIndex === "3"的时候获取商品属性信息

   //监听更新，在<el-tabs>中tabs变化的时候
      async clickTabs(e) {
        // console.log(this.activeIndex)
        //即当切换到商品参数的时候，此时获取动态参数
        //由于你点击tabs切换的时候activeIndex会实时更新，
        //因此这里直接直接监听activeIndex的值去判断你点击的是哪一个
        if (this.activeIndex === "2") {
          const { data: res } = await this.$http.get(
            `categories/${this.cateId}/attributes`,
            {
              params: {
                sel: "many",
              },
            }
          )
          if (res.meta.status !== 200) {
            this.$message.error("获取动态参数失败")
          }
          res.data.forEach((item) => {
            item.attr_vals =
              item.attr_vals.length === 0 ? [] : item.attr_vals.split(",")
          })
          this.manyList = res.data
        }
        //静态参数
        if (this.activeIndex === "3") {
          const { data: res } = await this.$http.get(
            `categories/${this.cateId}/attributes`,
            {
              params: {
                sel: "only",
              },
            }
          )
          if (res.meta.status !== 200) {
            this.$message.error("获取动态参数失败")
          }
          this.onlyList = res.data
        }
      },

这里的主要作用是，由于返回的attr_vals数据是以，分隔而成的字符串的形式，但是显示要求一个一个的显示，因此这里使用forEach遍历将其以“，”符号分隔成为数组的形式，然后再遍历显示