iview中如何实现模糊搜索

在 iview 中实现模糊搜索也可以使用过滤器（Filter）或计算属性（Computed）来实现。

使用过滤器的方法：

1. 在 Vue 实例中定义过滤器函数，接收一个参数（即搜索关键字）和一个数组（即需要搜索的数据列表）

filters: {
  fuzzySearch: function(value, list) {
    return list.filter(item => {
      return item.name.toLowerCase().indexOf(value.toLowerCase()) !== -1
    })
  }
}

2. 在模板中使用过滤器，传入搜索关键字和需要搜索的数据列表

<template>
  <Input v-model="searchText" />
  <ul>
    <li v-for="item in searchText ? searchText | fuzzySearch(list) : list">{{ item.name }}</li>
  </ul>
</template>

使用计算属性的方法：

1. 在 Vue 实例中定义计算属性，接收一个参数（即搜索关键字）和一个数组（即需要搜索的数据列表）

computed: {
  filteredList: function() {
    return this.list.filter(item => {
      return item.name.toLowerCase().indexOf(this.searchText.toLowerCase()) !== -1
    })
  }
}

2. 在模板中使用计算属性，直接遍历计算属性得到的过滤后的数据列表

<template>
  <Input v-model="searchText" />
  <ul>
    <li v-for="item in filteredList">{{ item.name }}</li>
  </ul>
</template>

在 iview 中使用过滤器和计算属性都可以实现模糊搜索，具体使用哪种方法取决于个人习惯。