vue2 前端实现模糊查询过滤

该文章介绍了如何在Vue.js应用中使用computed属性进行实时的列表模糊过滤,主要涉及的数据结构为list,关键在于将搜索值转换为小写并与list中的workloadGroupName属性进行匹配,以实现对工作负载组名称的搜索过滤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简介

纯前端实现对一个list进行模糊过滤。

代码

html

<div
    v-for="(item,index) in tableList"
    :key="index"
    class="list-box-item cursorPointer"
	:class="currentId===item.workloadGroupId? 'active':''"
    @click="changeGroup(item)">
    <p>{{item.workloadGroupName}}</p>
</div>

js

 data() {
    return {
      drawer: false,
      searchValue: '',
      list: [],
      title: '', // 后端接口返回的所有数据
      currentId: ''
    }
  },
  computed: {
    // 前端过滤搜索
    tableList() {
      let search = this.searchValue ? this.searchValue : ''
      if (search) {
        search = search.toLowerCase() // 英文大写转小写
        return this.list.filter((item) => {
          return Object.keys(item).some((key) => {
            if (key === 'workloadGroupName') { // 只根据名称列搜索
              const name = String(item[key]).toLowerCase() // 英文大写转小写,indexOf方法严格区分大小写
              if (name.indexOf(search) > -1) {
                return true
              } else {
                return false
              }
            } else {
              return false
            }
          })
        })
      }
      return this.list
    }
  },

注意

在computed中不要使用箭头函数,否则会报错,因为我们需要引用到data中的数据,要用this引用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值