首页 前端知识 vue element组件,对数组 进行 传参查询过滤,模糊匹配

vue element组件,对数组 进行 传参查询过滤,模糊匹配

2024-05-09 11:05:39 前端知识 前端哥 424 402 我要收藏

后端返回数组,vue+element组件需要前端进行传参搜索查询过滤,模糊匹配

例子:

<template>

 <el-input placeholder="搜索应用名称" v-model.trim="searchText" clearable>

            <template #suffix>

              <div class="search-input-icon" @click="searchList">

                <i class="el-icon-search"></i>

              </div>

            </template>

  </el-input>

<p v-for="item in list" :key="item.id">{{item.name}}</p>

</template>

<script>

export default {

  data() {

    return {

      searchText: "",

        listAll:[{name:'111',id:1,title:'测试1'},{name:'222',id:2,title:'测试2'}],

        list :[]

    }

},

  watch: {

    searchText(val) {

      if (!val) {

        this.list = this.listAll;

      } else {

        this.list = this.searchvalue(this.listAll, this.searchText);

      }

    },

  },

  methods: {

    //模糊搜索

    searchvalue(list, keyWord) {

      if (keyWord !== "") {

        var reg = new RegExp(keyWord);

        var arr = [];

        for (var i = 0; i < list.length; i++) {

          if (reg.test(list[i].name)) {

            //这里匹配的是数组中需要的的内容,可根据业务需求自行修改!

            arr.push(list[i]);

          }

        }

        return arr; //返回符合条件的数组

      } else {

        return list;

      }

    },

}

},

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7710.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!