vue3 模糊搜索

        在项目中,搜索功能是经常需要使用的一个场景,最常用的是在列表数据中搜索一个想要的,并展示。搜索逻辑是只要用户输入值与产品的名称进行模糊匹配,符合条件的数据进行展示,不符合条件的数据过滤。步骤如下:

  1. 用户点击搜索框,输入内容;
  2. 点击搜索按钮,取用户输入值;
  3. 对用户输入值进行判断,若为空,则展示原列表,不为空则进行筛选;
  4. 将用户输入值与所有列表数据进行遍历匹配,若匹配,则展示匹配条目,完成搜索。
 <input placeholder="搜索姓名" v-model="inputValue" >
 <n-button type="primary" @click="searchig"> 搜索 </n-button>

setup中声明

const inputValue = ref('');
 //搜索
      const searchig = () => {
        data.arr = [];
        for (let i = 0; i < 自己数据列表.length; i++) {
          if (自己数据列表[i].name.indexOf(inputValue.value) != -1) {
            data.arr.push(自己数据列表[i]);
          }
        }
       列表数据源 = data.arr;//重新赋值
      };

猜你喜欢

转载自blog.csdn.net/wsdshdhdhd/article/details/126596646
今日推荐