vue二级联动 编辑

第一步先写布局：

 

 然后写我们的二级联动的方法

getOptionsA() {
      this.$axios
        .get('http://localhost:55629/api/GetClassifies?pid=0')
        .then((res) => {
          this.optionsA = res.data
        })
    },
    getOptionsB(value) {
        //给第一级ID 赋值
       this.resetForm.CIdA = value[0]
      this.$axios
        .get(`http://localhost:55629/api/GetClassifies?pid=${value[0]}`)
        .then((res) => {
          this.optionsB = res.data
        })
    },

在页面中绑定对应的字段

 <el-cascader-panel :options="optionsA"
                           :props="{ value: 'CId', label: 'CName' }"
                           ref="optA"
                           @change="getOptionsB"></el-cascader-panel>

在Element中，props可以用来接收，它的value属性绑定对应的主键ID，label属性绑定要显示的字段、

在我们写接下来的添加时

可以在框架上加上显示与否的属性

 

 

 将它的默认值设为true

 

 触发按钮之后将值设为false就可以显示添加的页面

 

 步骤条：

 if (this.active++ > 2) this.active = 0 //更新步骤条

详情页：

可以选择传id进行查找或者直接传一个对象

 

 

 

 

然后在详情页面进行接收，如果涉及下拉框的详情页面，就需要将传来的下拉框主键值转换为Number

    //反填图片
    this.imageUrl = this.ruleForm.ImgPath

    //反填发类
    this.ruleForm.BId = this.$route.query.BName
    //反填商品分类
    this.optAName = this.$route.query.CNameA
    this.optBName = this.$route.query.CNameB

 

 

 

------以上操作都是基于Elment的框架下