ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Element远程搜索中数据的动态绑定实现

2022-06-25 20:31:07  阅读:110  来源: 互联网

标签:data 绑定 Element item 搜索 数据 远程


一、介绍

在Element官网(地址:https://element.eleme.cn/#/zh-CN)2.x文档中,远程搜索组件位于Select 选择器栏目下。

远程搜索实现的是从服务器搜索数据,能够输入关键字进行查找,效果图如下。

 

实际效果展示:

二、添加页面效果

文档里说——为了启用远程搜索,需要将filterableremote设置为true,同时传入一个remote-method

正是如此。在实际使用中,我在<el-select>标签中加入filterable和remote属性,同时传入了一个remote-method方法。

<el-select
    v-model="value"
    filterable
    remote
    reserve-keyword
    placeholder="请输入姓名"
    :remote-method="remoteMethod"
>

上一步的操作仅是步骤一,为了实现选择项的效果,还需添加<el-option>标签,具体写法参考官方文档。

<el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
</el-option>

这样页面展示部分的效果实现就完成了。

三、数据绑定

在数据绑定方面,需要注意v-model和v-for的绑定对象。

其中,v-model绑定的是一个data内的空value[]数组,它是根据vue中的双向绑定原理,使得页面获取到data内的数据,它需要在方法内部进一步实现赋值。

然后是v-for遍历的数据对象options,它在data内部的定义也是一个空数组,并使用key、label、value绑定了对象中的键和值,它也需要在后续方法内进一步实现赋值。

data() {
  return {
          options: [],
      value: [],
      ...  //其他数据
        }
     }

四、两个重要方法

远程搜索实现中的两个重要方法:mounted()和remoteMethod()方法,参考代码如下。

//远程搜索数据传递
mounted() {
  this.list = this.states.map(item => {
    return {value: `${item}`, label: `${item}`};
  });
},

在mounted()方法中,将states数组的map元素赋值给了list数组,然后返回出了value和label,即将其绑定到页面上完成了数据显示。

//远程搜索
remoteMethod(query) {
  //动态绑定数据库数据(实际使用举例)
  axios.fuzzySearchAllUserNames({userName: query}).then((res) => {
    this.states = res.data.data;
  })
  if (query !== '') {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
      this.mounted();  //实际中调用数据传递
      this.userNameOptions = this.list.filter(item => {
        return item.label.toLowerCase()
            .indexOf(query.toLowerCase()) > -1;
      });
    }, 200);
  } else {
    this.userNameOptions = [];
  }
},

在remoteMethod()方法中,除了官方所给模版代码,我首先使用了一个fuzzySearchAllUserNames模糊查询的接口方法,完成对数据库数据的获取。然后在代码执行中加入了this.mounted(),将states更新成从数据库获取的数据,这样即完成了数据的动态化(从数据库获取所需绑定数据)。

至此,就完成了Element远程搜索中数据的动态绑定实现。

五、小结

1、远程搜索能实现从服务器搜索数据,够输入关键字进行查找。

2、官方文档所给案例为静态数据,在实际中需要动态地从数据可获取数据,实现搜索。

3、使用中要注意理解数据的绑定逻辑。

 

标签:data,绑定,Element,item,搜索,数据,远程
来源: https://www.cnblogs.com/csw2021/p/16412359.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有