vue element下拉框的应用

eg 1：  获取某个设备下得多个设备得方法

一.  获取第一个下拉框得数据；
1 ,  首先查看接口方法(post  get)，及其传参 。
2，请求接口 如果code==200把返回数据赋值 eg：   let data=res.data.data；
3，渲染数据  判断返回数据是否是数组  Array.isArray(data) ，
      遍历数组把想要的数据重新赋值 放到一个新定义得空数组里 return{ value：item.id,  label:item.name,}
      ui界面  v-for遍历新的数组  :label="item.lable" :value="item.id"  
      v-model绑定得是给后端传的值
4  调用：
    mounted() { 模板渲染成html后调用
       this.$nextTick(() => {
       this.事件()；
      }
   },
二.  获取第二个下拉框得数据； 
1， 给第一个下拉框一个@change事件，把选中项 默认的id带过去。
2， 通过id或者其他参数 请求接口，返回数据  判断数据为数组 定义新数组 遍历数组把想要的数据重新赋值 return{ id:item.id, value    label}，v-for遍历数组，把相应的value   label赋值。
3， v-model绑定得是给后端传的值。

 

eg 2：  关联级下拉框。（编辑回显）

点击弹框 调用方法。

一 ， 同一数组下数据，第一个接口数据。
传参--请求接口---返回数据--赋值---判断是否数组--定义新数组--遍历赋值所需数据新数组--return{value，label......}
渲染数据 遍历新数组---label value 赋值想要的结果-----v-mode绑定给后端传得数据。

二， 第二个下拉框。

给第一个下拉框一个@change事件，也把相对应值id带过来，根据id在对应数组里根据find查找相应的name值。

   let item = this.data.find( v=> v.unid == id);

    this.names = item.name;

   v-model  绑定names给后端传值

要点：

1  每次调用方法要清除下拉框原本数据：通过splice（0，this.data.length）;

2  下拉既可以输入又可以选择：filterable allow-create  

allow-create----属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真，

default-first-option-----按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。