如何使用vue和Element-plus实现数据的筛选和排序

vue是一个构建用户界面的渐进式框架，可以用来快速构建复杂的单页面应用程序。Element-plus是一个基于Vue.js 3.0的UI组件库，提供了一些常用的组件，可以方便地使用和调整。本文将介绍如何使用Vue和Element-plus来实现数据的筛选和排序。

1. 安装Vue和Element-plus

首先，需要安装Vue和Element-plus。可以使用npm来安装这些依赖项。在命令行中运行以下命令：

npm install vue@next
npm install element-plus

2. 创建Vue应用程序

创建一个Vue应用程序的方法有很多种。这里我们将使用Vue CLI来创建应用程序。

首先，在命令行中输入以下命令来安装Vue CLI：

npm install -g @vue/cli

安装完成后，在命令行中输入以下命令来创建新的Vue应用程序：

vue create my-app

在创建过程中，选择手动选项，然后勾选Vuex和Router选项。

? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
> Manually select features
? Check the features needed for your project:
  (*) Choose Vue version
  (*) Babel
  ( ) TypeScript
  ( ) Progressive Web App (PWA) Support
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

等待创建过程完成后，在命令行中进入my-app目录，并运行以下命令来启动服务器：

cd my-app
npm run serve

3. 创建数据表格

在src目录中创建一个名为components的新目录。在components目录中创建一个名为DataTable.vue的新文件。这个组件将用于在网页上显示数据。

<template>
  <div>
    <el-table
      :data="filteredList"
      style="width: 100%"
      :row-key="getRowKey">
      <el-table-column
        prop="name"
        label="Name"
        sortable
        :sort-by="['name']">
      </el-table-column>
      <el-table-column
        prop="age"
        label="Age"
        sortable
        :sort-by="['age']">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="Gender"
        sortable
        :sort-by="['gender']">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'DataTable',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      searchText: '',
      sortBy: '',
      sortDesc: false
    }
  },
  computed: {
    filteredList() {
      return this.list.filter((item) => {
        return item.name.toLowerCase().includes(this.searchText.toLowerCase());
      }).sort((a, b) => {
        if (this.sortBy) {
          let sortValue1 = a[this.sortBy];
          let sortValue2 = b[this.sortBy];
          if (this.sortBy === 'age') {
            sortValue1 = parseInt(sortValue1);
            sortValue2 = parseInt(sortValue2);
          }
          if (this.sortDesc) {
            return sortValue1 < sortValue2 ? 1 : -1;
          } else {
            return sortValue1 < sortValue2 ? -1 : 1;
          }
        }
        return 0;
      });
    }
  },
  methods: {
    getRowKey(row) {
      return row.name;
    }
  }
};
</script>

这个组件包含一个表格，用于显示数据。数据通过props传递到组件中来。组件有三个计算属性：filteredList、sortedList和getRowKey。filteredList根据搜索文本和排序方式过滤和排序数据。sortedList是filteredList排序后的数据，getRowKey方法返回表格中的行键值。

4. 创建筛选和排序组件

在components目录中创建一个名为FilterSort.vue的新文件。这个组件将用于实现筛选和排序的功能。

<template>
  <div>
    <el-input
      v-model="searchText"
      placeholder="Search text">
    </el-input>
    <el-select
      v-model="sortBy"
      placeholder="Sort by">
      <el-option
        v-for="item in sortOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-switch
      v-model="sortDesc"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>
  </div>
</template>
<script>
export default {
  name: 'FilterSort',
  data() {
    return {
      searchText: '',
      sortBy: '',
      sortDesc: false,
      sortOptions: [
        { value: 'name', label: 'Name' },
        { value: 'age', label: 'Age' },
        { value: 'gender', label: 'Gender' }
      ]
    }
  },
  watch: {
    searchText(newVal) {
      this.$emit('search-text-changed', newVal);
    },
    sortBy(newVal) {
      this.$emit('sort-by-changed', newVal);
    },
    sortDesc(newVal) {
      this.$emit('sort-desc-changed', newVal);
    }
  }
};
</script>

这个组件包含一个文本框、一个下拉框和一个开关，用于实现筛选和排序的功能。筛选功能通过文本框实现，用户可以输入搜索文本。排序功能通过下拉框和开关实现，用户可以选择排序字段和排序方式。

5. 使用DataTable和FilterSort组件

现在可以在主Vue组件中使用DataTable和FilterSort组件了。在src目录中打开App.vue文件，添加以下代码：

<template>
  <div class="container">
    <h3>Data Table</h3>
    <filter-sort
      @search-text-changed="searchTextChanged"
      @sort-by-changed="sortByChanged"
      @sort-desc-changed="sortDescChanged">
    </filter-sort>
    <data-table
      :list="list">
    </data-table>
  </div>
</template>
<script>
import DataTable from './components/DataTable.vue';
import FilterSort from './components/FilterSort.vue';
export default {
  name: 'App',
  components: {
    DataTable,
    FilterSort
  },
  data() {
    return {
      list: [
        { name: 'Tom', age: 30, gender: 'male' },
        { name: 'Jerry', age: 25, gender: 'female' },
        { name: 'Spike', age: 35, gender: 'male' },
        { name: 'Tyke', age: 10, gender: 'male' }
      ],
      searchText: '',
      sortBy: '',
      sortDesc: false
    }
  },
  methods: {
    searchTextChanged(searchText) {
      this.searchText = searchText;
    },
    sortByChanged(sortBy) {
      this.sortBy = sortBy;
    },
    sortDescChanged(sortDesc) {
      this.sortDesc = sortDesc;
    }
  }
};
</script>

这个组件包含一个标题、一个FilterSort组件和一个DataTable组件。list是用于显示在DataTable中的数据。searchText、sortBy和sortDesc是传递给FilterSort和DataTable组件的属性。

6. 运行应用程序

所有代码都已经完成了。现在，在命令行中运行以下命令来启动应用程序：

npm run serve

在浏览器中打开http://localhost:8080/，应该可以看到一个表格和一些筛选和排序组件。您可以尝试输入搜索文本、选择一个排序字段和改变排序方向来调整表格中的数据。