实现远程搜索功能

项目在开发的过程中，有时候接口返回的数据过得，有上千甚至上万条数据，下拉框不能将数据全部列上去，这样页面会出现卡顿，造成性能问题，以及影响用户的体验度，所以进行优化，通过远程搜索（从服务器搜索数据，输入关键字进行查找）可以解决这一问题。

• 这是从接口返回的数据,可以看出数据过于庞大，不能将数据直接进行绑定；

 <el-select v-model="patient.operationId" filterable placeholder="请选择" style="width:100%"
     :filter-method="selectOperation" class="diagInput" remote clearable multiple
      @change="updPatientList('operation_id', 'operationId')">
           <el-option v-for="item in operationList" :key="item.id" :label="item.name" 
            :value="item.id">
                   <span style="float: left">{{ item.name }}</span>
                   <span style="float: right; color: #8492a6; font-size: 13px">
                       {{ item.id }}</span>
           </el-option>
 </el-select>

• 其中要使用以下属性；

remote	是否为远程搜索
filterable	是否可搜索
filter-method	自定义搜索方法

• operationList 是将接口返回的数据截取了100条，所以下拉框只能显示100条；

  async findSSMC() {
      await findOperationName().then(res => {
        this.operationListAll = res.rows
        this.operationList = res.rows.slice(0, 100)
      })
    },

•  operationListAll是接口中返回的所有数据，是个数组；selectOperation这个方法的val就是你在输入框中输入的内容，输入的是字母，会先进行个转大写，或者是汉字，再根据数据进行筛选，返回匹配的内容；如果没有输入，下拉的选项还是之前的100条数据；

    selectOperation(val) {
      let mh = [];
      let vs = this.operationListAll;
      if (val) {
        let upperVal = val.toUpperCase();
        mh = vs.filter(item => item.name.includes(val) || (item.py && 
        item.py.toUpperCase().includes(upperVal)));
      } else {
        mh = vs.slice(0, 100);
      }
      this.operationList = mh;

    },

 而updPatientList这个方法是搜索后下拉的内容选中后，输入框的值发生改变进行的方法，在此不多强调。