当前位置：首页 > article >正文

element-plus+vue3前端如何根据name进行搜索查到符合条件的数据

article 2025/2/7 6:59:54

界面如图，下面的区域是接口给的所有的，希望前端根据输入的内容自己去匹配。

我是使用的element-plus+vue3+ts的写法。

<el-input v-model="filters.region" placeholder="输入区域搜索" @keyup="filterRegion(filters.region)"></el-input>

import {useDebounceFn} from "@vueuse/core/index";

let allRegions=ref([{id:1,name:'区域1'},{id:1,name:'区域12'},{id:1,name:'区域31'},{id:1,name:'区域14'},{id:1,name:'区域15'},{id:1,name:'区域16'}]);
let initallRegions=ref([]);//这里重新定义一个变量保存初始的allRegions数据,以避免修改了allRegions之后找不到最初的值了

initallRegions.value=allRegions.value;

const filterRegion= useDebounceFn((queryString: string) => {
    console.log(queryString)
    if(queryString!=''){
      let newArr=[];
      initallRegions.value.forEach(res=>{
        if(res.name.indexOf(queryString)!=-1){
          newArr.push(res)
        }
      })
      allRegions.value=newArr;
    }else{
      allRegions.value=initallRegions.value;
    }
  },100)

主要的原理还是使用indexOf去找他的name匹配的值。并且注意如果搜索内容是空的话还是要显示全部的内容的。

‌useDebounceFn‌是一个用于处理防抖函数

查看全文

http://www.kler.cn/a/534713.html