锐客网

  1. 首页 > 睿知 > it技术 > >

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

javascriptuivue.js

element-ui 远程搜索组件el-select在项目中代码实现 一、功能展示 1、当没有搜索条件时搜索显示全部
ui|element-ui 远程搜索组件el-select在项目中代码实现
文章图片

2、当有搜搜条件时模糊查询符合的数据
ui|element-ui 远程搜索组件el-select在项目中代码实现
文章图片

二、代码实现 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){//远程搜索获取数据 //获取远程搜索的数据 }

    【ui|element-ui 远程搜索组件el-select在项目中代码实现】用户每次从搜索宽输入值时，当光标停下时就会调用它，query为用户输入的值
  2. remoteMethod(query) { this.selectLoading=true; this.selectEnterprise(query); }

    用户在输入框输入查询数据时，会调用
  3. selectFocus:function (){ this.options=[]; this.selectLoading=true; this.selectEnterprise(""); }

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

    推荐阅读


    上一篇：web前端学习|18.Vue组件化编程

    下一篇：java|自己的开源项目被尤雨溪写进演讲稿是一种什么体验（）