ElementUI 下拉选择器的远程搜索输入空格不触发remoteMethod方法--优化

最新推荐文章于 2025-04-11 16:51:49 发布

who am I？ 6666

最新推荐文章于 2025-04-11 16:51:49 发布

阅读量2.1k

点赞数 1

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/machine_vision123/article/details/126297181

版权

远程搜索功能：

trim()方法去除query的首尾空格。

优化原因：

当在输入框中打入空格依然回去调用接口，优化可以发起调用接口的请求

优化代码：

<template>
  <el-select
    v-model="value"
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data () {
    return {
      options: [],
      value: [],
      list: [],
      loading: false,
      states: ['李白', '王勃', '白居易']
    }
  },
  mounted () {
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` }
    })
  },
  methods: {
    remoteMethod (query) {
      const data = query.trim()
      if (data !== '') {
        console.log('输入非空格才会执行此语句' + 123456)
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(data.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    }
  }
}
</script>