el-select自定义模糊查询 减少HTTP请求次数、提高性能

el-select自定义模糊查询 减少HTTP请求次数、提高性能。

将我们所需的数据存储到store里 然后自定义搜索 直接附上代码~

<template>
    <div class="item-select-wrapper">
      <el-select v-model="value1" filterable="filterable" :filter-method="getLength" :disabled="disabled"
                 :loading="loading" :size="size">
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
          <div>{{ item.name }}</div>
          <div class="info">{{ item.itemNo }}</div>
        </el-option>
      </el-select>
    </div>
  </template>
  
  <script>
import { mapGetters } from 'vuex'
  export default {
    name: 'processSelect',
    props: {
      value: {
        type: [String, Number],
        default: null
      },
      size: {
        type: String,
        default: 'small'
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        options: [],
        list:[],
        loading: false
      }
    },
    computed: {
      ...mapGetters(['processList']),
      value1: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    },
    created() {
      this.setOptions()
    },
    methods: {
      getLength(val){
        if(val){
          let lists = []
          for(let i = 0;i<this.list.length;i++){
            if(this.list[i].name.includes(val) || this.list[i].code.includes(val)){
              lists.push(this.list[i])
            }
          }
          this.options = lists
        }else{
          this.options = this.list
        }
      },
      setOptions() {
        this.options = this.processList.map(process => {
          return {
            id: process.id,
            name: process.name,
            code: process.code,
          }
        })
        this.list = JSON.parse(JSON.stringify(this.options))
      }
    }
  }
  </script>
  
  <style lang="stylus">
  
  </style>