element-ui 远程搜索组件el-select在项目中代码实现

element-ui 远程搜索组件el-select在项目中代码实现

一、功能展示

1、当没有搜索条件时搜索显示全部

2、当有搜搜条件时模糊查询符合的数据

二、代码实现

1、先引入select组件的代码

(页面代码)

注意：v-for循环生成下拉选择框的数据：key和value得换成自己从数据库查到所要展示的数据

（script）

2、data ()变量详细说明：可根据自己的需求更改变量的值

1. 首先更改自己所要远程搜搜的接口：url

2. 设置从数据库查询出的数据:分别设置key，和value,以便于赋值操作-----（key一般来说是id，value一般来说就是名称类的）

3. selectEnterpriseForm，这个是远程搜索的表单，里面存储了远程搜索的值，用了表单的传递方式给后端传输模糊查询的数据

   	  key:"id",   //key
         value:"enterpriseName",  //value
         options: [],   //存储下拉框的数据
         selectKey:"",   //绑定的所选择的key
         selectUrl:"/v1/statistics/selectEnterprise",    //获取数据的请求地址
         selectEnterpriseForm:{
           enterpriseName:"",   //远程搜索的值
         },
         selectLoading: false,   //搜索数据时的一个渲染，显示加载中，
       }
   

3、methods方法说明：

1. selectEnterprise: function(query){       //远程搜索获取数据
   	//获取远程搜索的数据
   }  
   

   用户每次从搜索宽输入值时，当光标停下时就会调用它，query为用户输入的值

2. remoteMethod(query) {
         this.selectLoading=true;
         this.selectEnterprise(query);
   }
   

   用户在输入框输入查询数据时，会调用

3. selectFocus:function (){
         this.options=[];
         this.selectLoading=true;
         this.selectEnterprise("");
   }
   

   获得焦点时触发函数，获得焦点时没有输入任何搜索值，所以查询全部数据，这一步可以不查，根据自己得需求来

----------->完工