如何通过vue和Element-plus实现搜索和过滤功能

1. 简介

Vue 和 Element Plus 都是目前较为流行的前端开发框架和组件库，Vue 可以轻松构建一个可重用的 UI 组件，而 Element Plus 则是在 Vue 基础之上的一套组件库，提供了非常丰富的 UI 组件。本文将主要介绍如何使用 Vue 和 Element Plus 实现搜索和过滤功能。

2. 准备工作

在开始之前，需要安装和引入 Vue 和 Element Plus，这里我们使用 npm 安装。

  // 安装 Vue
  npm install vue
  // 安装 Element Plus
  npm install element-plus

2.1 引入 Element Plus

在 Vue 的入口文件（如 main.js）中，我们需要引入 Element Plus。

  import { createApp } from 'vue'
  import ElementPlus from 'element-plus'
  import 'element-plus/lib/theme-chalk/index.css'
  createApp(App).use(ElementPlus).mount('#app')

这里我们引入了 Element Plus 的主题样式。

3. 实现搜索和过滤功能

对于搜索和过滤功能，最常见的需求是在一个表格或列表中根据输入框的内容进行实时搜索和过滤。

3.1 搜索功能的实现

搜索功能一般是针对整个列表或表格进行搜索，我们需要使用 v-model 指令绑定输入框的值，然后根据输入框的内容进行过滤即可。在实现之前，需要先准备好一个列表数据。

  data() {
    return {
      searchData: '',
      list: [
        {id: 1, name: 'John Smith', age: 25},
        {id: 2, name: 'David Johnson', age: 30},
        {id: 3, name: 'Mary Brown', age: 40},
        {id: 4, name: 'Lucy Lee', age: 28},
      ]
    }
  }

接下来，我们需要在模板中添加一个输入框和一个表格，通过 v-model 指令将输入框的值绑定到 searchData 变量上，然后使用计算属性 filteredList 进行列表过滤。

  <template>
    <div>
      <el-input v-model="searchData" placeholder="请输入关键字进行搜索"></el-input>
      <el-table :data="filteredList">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        searchData: '',
        list: [
          {id: 1, name: 'John Smith', age: 25},
          {id: 2, name: 'David Johnson', age: 30},
          {id: 3, name: 'Mary Brown', age: 40},
          {id: 4, name: 'Lucy Lee', age: 28},
        ]
      }
    },
    computed: {
      filteredList() {
        // 过滤列表
        return this.list.filter(item => {
          return item.name.toLowerCase().includes(this.searchData.toLowerCase())
        })
      }
    }
  }
  </script>

这里我们使用计算属性 filteredList 对列表进行过滤，并使用 v-bind 指令将过滤后的列表数据绑定到表格组件的 data 属性上。这里需要注意的是，在过滤时，为了不区分大小写，我们使用 toLowerCase() 方法将搜索关键字和列表项转换为小写进行匹配。

3.2 过滤功能的实现

过滤功能是在列表或表格中针对特定字段进行过滤，这里我们可以使用一个下拉菜单和一个标签。在选择下拉菜单中的选项时，我们需要根据选中的值对列表数据进行过滤。

  <template>
    <div>
      <el-select v-model="selectedFilter" placeholder="请选择">
        <el-option label="全部" value=""></el-option>
        <el-option label="年龄≥30" value="age30"></el-option>
        <el-option label="年龄＜30" value="ageLess30"></el-option>
      </el-select>
      <el-tag v-show="selectedFilter" @close="selectedFilter=''">{{selectedFilterText}}</el-tag>
      <el-table :data="filteredList">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        selectedFilter: '', // 已选过滤条件
        list: [
          {id: 1, name: 'John Smith', age: 25},
          {id: 2, name: 'David Johnson', age: 30},
          {id: 3, name: 'Mary Brown', age: 40},
          {id: 4, name: 'Lucy Lee', age: 28},
        ]
      }
    },
    computed: {
      filteredList() {
        // 过滤列表
        let list = this.list
        if (this.selectedFilter) {
          if (this.selectedFilter === 'age30') {
            list = list.filter(item => item.age >= 30)
          } else if (this.selectedFilter === 'ageLess30') {
            list = list.filter(item => item.age < 30)
          }
        }
        return list
      },
      selectedFilterText() {
        // 获取已选过滤条件的文本
        let text = ''
        if (this.selectedFilter) {
          if (this.selectedFilter === 'age30') {
            text = '年龄≥30'
          } else if (this.selectedFilter === 'ageLess30') {
            text = '年龄＜30'
          }
        }
        return text
      }
    }
  }
  </script>

这里我们使用 v-model 指令绑定了下拉菜单的值，使用计算属性 filteredList 对列表数据进行过滤，然后使用 v-bind 指令将过滤后的列表数据绑定到表格组件的 data 属性上。对于已选过滤条件的文本，我们使用计算属性 selectedFilterText 计算得出。在计算属性 filteredList 中，需要根据 selectedFilter 的值来对列表数据进行过滤，通过 if 语句来判断选中的是哪个选项，然后进行过滤即可。

4. 总结

通过 Vue 和 Element Plus，我们可以轻松实现搜索和过滤功能。在实现搜索功能时，使用 v-model 指令绑定输入框的值，然后根据输入框的值进行列表过滤；在实现过滤功能时，使用下拉菜单和标签来选择和展示选中的过滤条件。