1 说明

有这样一种情况，我们有一段数据是通过外部接口返回过来的，这个时候我们下拉框控件应该怎么应用到这段数据呢？
问：有两个下拉控件，第二个下拉控件的可选数据，是根据第一个下拉框选值来变化的，应该如何做？

2. 操作步骤

2.1. 创建两个下拉控件

如图我们先创建两个下拉控件（first,second),我们给第一个下拉控件first设置可选值：

2.2. 定义外部链接返回的数据

然后我们有一段外部链接返回的数据，（我这里没有，所以就写死在js脚本里面了）如图：

 var json={ 
    "A": [{   "value": "A1","label": "A1"},{"value": "A2","label": "A2"}],
    "B": [{"value": "B1","label": "B1"},{"value": "B2","label": "B2"}]
  };
  this.$set(this.data,"json",json);

2.3. 将数据设置到表单的data中

我们通过this.$set 把这段数据挂载到表单的data数据里面，并命名为json ;

2.4. 编写控件的change方法

然后我们修改第一个下拉控件first里面的 v-on:valuechange 方法，自定义一个名为func_change的方法；

//改为

v-on:valuechange="func_change(data.first)"

//注意一：func_change可以任意取名字，但必须以“func_”开头，func_xxx；

//注意二：func_change 里面的参数是该控件的 v-model，

//其实我们就是把这个控件的选中值传到func_change方法里面去；

2.5. 定义自定义方法

配置自定义方法 func_change ，我们在js脚本中的custFuntions数组中加入一下对象；

 {
    name:"change",
    action:function(val){//val = A or B
      var ds=this.data.json[val];
      var obj={from:"custom",options:ds};
      this.$set(this.data,"ds",obj);
    }
  }
  //name:方法名称,我们上面取的名字是func_change，所以name就是change；
  //action:方法func_change调用时触发的方法；
  //val：下拉框选择后传过来的参数；
  //this.data.json :绑定在data上面的数据（看上面第二条）；

  // var obj={from:"custom",options:ds}; 
  // 固定格式，只需要把 需要显示在第二个下拉框中的数据 放到options中就行了；

  //this.$set(this.data,"ds",obj);把数据挂载到表单的data数据中，并命名为 " ds "

2.6. 配置第二个下拉框

配置第二个下拉框，第二个下拉框的配置比较简单，只需要加一个属性就行了；

:datasource="data.ds"

//data.ds 是前面js脚本中挂载的数据； this.$set(this.data,"ds",obj);

注意：以上是在主表中的配置，那么在子表中的配置应该怎么做呢？

3. 子表配置

3.1.子表其实很简单如下：

//第一个下拉框:
v-on:valuechange="func_change(item.wer,index)"

//第二个下拉框:
:datasource="data['ds'+index]"

//js脚本：
  {
    name:"change",
    action:function(val,index){
      var ds=this.data.json[val];
      var obj={from:"custom",options:ds};
      this.$set(this.data, "ds"+index, obj);
    }
  }
//思路：只需要在绑定数据到表单的data的时候把数据绑定的名字与下标结合（"ds"+index），保证每一条数据都是单独的就行了；