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),保证每一条数据都是单独的就行了;

3.2 最终效果:

4. 接口数据获取

如果数据来自第三方接口,或者 自定义脚本或者自定义SQL查询。

我们可以使用下面的文件介绍去获取数据。

http://doc.redxun.cn/docs/jpaas/execAjaxInForm

文档更新时间: 2021-07-09 14:31   作者:zyg