vue中listquery

在 Vue 中，List Query 是指在列表页面中实现搜索、过滤、排序等操作的功能。通常情况下，我们需要在组件中定义一个列表数据源（比如一个数组或者一个 API 接口），然后在模板中展示这个数据源。接着，在组件中定义一些状态变量来表示搜索条件、排序方式等，然后在模板中通过表单元素（比如输入框、下拉框等）与这些状态变量进行绑定，从而实现搜索、过滤、排序等功能。

下面是一个简单的示例，展示了如何在 Vue 中实现一个基本的 List Query：

<template>
  <div>
    <label>Search:</label>
    <input type="text" v-model="searchText">
    <label>Sort by:</label>
    <select v-model="sortBy">
      <option value="name">Name</option>
      <option value="age">Age</option>
    </select>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="person in filteredList" :key="person.id">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Charlie', age: 20 },
      ],
      searchText: '',
      sortBy: 'name',
    };
  },
  computed: {
    filteredList() {
      let list = this.people.slice();

      if (this.searchText) {
        list = list.filter(person =>
          person.name.toLowerCase().includes(this.searchText.toLowerCase())
        );
      }

      if (this.sortBy === 'name') {
        list = list.sort((a, b) => a.name.localeCompare(b.name));
      } else {
        list = list.sort((a, b) => a.age - b.age);
      }

      return list;
    },
  },
};
</script>

在这个示例中，我们首先定义了一个 people 数组来表示人员列表。然后，我们定义了两个状态变量 searchText 和 sortBy，分别表示搜索文本和排序方式。在模板中，我们使用一个输入框和一个下拉框来与这两个状态变量进行绑定。最后，在计算属性 filteredList 中，我们根据搜索文本和排序方式对人员列表进行过滤和排序，并返回过滤后的列表。

需要注意的是，在实际开发中，我们通常会将列表数据源和状态变量放在一个 Vuex store 中，以便在多个组件之间共享数据。同时，我们也可以使用第三方库（比如 Element UI 或者 Vuetify）来快速地构建出复杂的 List Query 功能。