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

一、介绍

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

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

 

实际效果展示：

二、添加页面效果

文档里说——为了启用远程搜索，需要将filterable和remote设置为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、使用中要注意理解数据的绑定逻辑。