select 远程搜索

页面代码


el-select(v-model="uList[scope.$index]['itemName']"  multiple filterable remote reserve-keyword placeholder="请输入检测项目" :remote-method="remoteMethod" :loading="loading")
                        el-option(v-for="(item, i) in list" :key="i" :label="item.label" :value="item.value")

需要的值

list:[],


testB3: [
                    { label: "布氏硬度", value: "布氏硬度" },
                    { label: "洛氏硬度", value: "洛氏硬度" },
                ],

方法


remoteMethod(query) {
                let that = this;
                if (query !== '') {
                    this.loading = true;
                    let test = JSON.parse(JSON.stringify(that.testB3));
                    setTimeout(() => {
                        that.loading = false;
                        that.list = test.filter(item => {
                            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                    that.list = test;
                } else {
                    that.list = [];
                }
            },

问：怎么把这个select远程搜索方法封装成一个公用方法？

web

71 引用
Q&A

973 引用

【俗人】 2 年前西安位置

0 点赞

0 关注

0 收藏

100 悬赏

作者勋章

12 回帖

984

优质回帖

我是跳跳吧 (imlinhanchao) • 2 年前 1 摸鱼派管理组成员

写了个例子，看看能解决你的问题不。


<template>
  <el-select
    v-model="select1"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入检测项目"
    :remote-method="(query) => remoteMethod(query, options1, searchSrc1)"
    :loading="loading"
  >
    <el-option v-for="(item, i) in options1" :key="i" :label="item.label" :value="item.value" />
  </el-select>
  <el-select
    v-model="select2"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入检测项目"
    :remote-method="(query) => remoteMethod(query, options2, searchSrc2)"
    :loading="loading"
  >
    <el-option v-for="(item, i) in options2" :key="i" :label="item.label" :value="item.value" />
  </el-select>
</template>
<script setup>
  import { ref } from 'vue';
  const loading = ref(false);
  const select1 = ref('');
  const select2 = ref('');
  const options1 = ref([]);
  const options2 = ref([]);

  function remoteMethod(query, options, searchSrc) {
    if (query !== '') {
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
        options.splice(
          0,
          options.length,
          ...searchSrc.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          }),
        );
      }, 200);
    } else {
      options.splice(0, options.length);
    }
  }

  const searchSrc1 = [
    { label: 'abc', value: 'abc' },
    { label: 'cde', value: 'cde' },
    { label: 'efg', value: 'efg' },
    { label: 'ghi', value: 'ghi' },
  ];

  const searchSrc2 = [
    { label: 'abc2', value: 'abc2' },
    { label: 'cde2', value: 'cde2' },
    { label: 'efg2', value: 'efg2' },
    { label: 'ghi2', value: 'ghi2' },
  ];
</script>

12 回帖

登录参与讨论 ...

我是跳跳吧 (imlinhanchao) • 2 年前

你希望达成的样子是什么样？遇到了什么问题？

1 回复 0 0 0
【俗人】 (custom) • 2 年前

我想把这个方法做成公用的函数，现阶段传值有一个空数组，函数内用不了

2 回复 0 0 0
我是跳跳吧 (imlinhanchao) • 2 年前

你说的公用函数，是指要把 remoteMethod 作为所有 select 的远程搜索调用？

1 回复 0 0 0
【俗人】 (custom) • 2 年前

对，传的参数都是一样的

0 0 0
我是跳跳吧 (imlinhanchao) • 2 年前

你说的传值有空数组是指什么？我看你的函数没啥问题呀。

2 回复 0 0 0
【俗人】 (custom) • 2 年前

函数没问题，需要改参数，l把list和testB3改成动态的，页面函数传进来的值

0 0 0
【俗人】 (custom) • 2 年前

由于list是个空数组带入到函数中就用不了，不知道为什么

0 0 0
星河鹭起 (Arrogant) • 2 年前

感觉这函数运行的结果跟list是啥都没关系啊，反正你里面会赋值

1 回复 0 0 0

我是跳跳吧 (imlinhanchao) 摸鱼派管理组成员

• 2 年前

写了个例子，看看能解决你的问题不。


<template>
  <el-select
    v-model="select1"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入检测项目"
    :remote-method="(query) => remoteMethod(query, options1, searchSrc1)"
    :loading="loading"
  >
    <el-option v-for="(item, i) in options1" :key="i" :label="item.label" :value="item.value" />
  </el-select>
  <el-select
    v-model="select2"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入检测项目"
    :remote-method="(query) => remoteMethod(query, options2, searchSrc2)"
    :loading="loading"
  >
    <el-option v-for="(item, i) in options2" :key="i" :label="item.label" :value="item.value" />
  </el-select>
</template>
<script setup>
  import { ref } from 'vue';
  const loading = ref(false);
  const select1 = ref('');
  const select2 = ref('');
  const options1 = ref([]);
  const options2 = ref([]);

  function remoteMethod(query, options, searchSrc) {
    if (query !== '') {
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
        options.splice(
          0,
          options.length,
          ...searchSrc.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          }),
        );
      }, 200);
    } else {
      options.splice(0, options.length);
    }
  }

  const searchSrc1 = [
    { label: 'abc', value: 'abc' },
    { label: 'cde', value: 'cde' },
    { label: 'efg', value: 'efg' },
    { label: 'ghi', value: 'ghi' },
  ];

  const searchSrc2 = [
    { label: 'abc2', value: 'abc2' },
    { label: 'cde2', value: 'cde2' },
    { label: 'efg2', value: 'efg2' },
    { label: 'ghi2', value: 'ghi2' },
  ];
</script>

2 回复 1 1 0

【俗人】 (custom) • 2 年前

感谢大佬

0 0 0
【俗人】 (custom) • 2 年前

下面一选上面也会跟着动，所以才会头疼二次赋值的问题

0 0 0
someone9330 • 2 年前

看了跳跳大佬的代码，又去复习了一下知识，真棒！！

0 0 0

select 远程搜索

相关帖子

随便看看

广告关闭

select 远程搜索

select 远程搜索

相关帖子

随便看看

广告 关闭

select 远程搜索

广告关闭