行业资讯

Vue支持搜索与筛选的用户列表如何实现

发布时间：2022-10-24 09:55:53 作者：iii
来源：亿速云 阅读：192

Vue支持搜索与筛选的用户列表如何实现

在现代Web应用程序中，用户列表是一个常见的功能。为了提升用户体验，通常需要为用户列表添加搜索和筛选功能。本文将详细介绍如何使用Vue.js实现一个支持搜索与筛选的用户列表。我们将从项目搭建开始，逐步实现搜索、筛选、分页等功能，并最终完成一个完整的用户列表组件。

目录

  1. 项目搭建
  2. 用户列表展示
  3. 实现搜索功能
  4. 实现筛选功能
  5. 分页功能
  6. 优化与总结

项目搭建

首先，我们需要创建一个Vue项目。如果你还没有安装Vue CLI，可以通过以下命令进行安装：

npm install -g @vue/cli

然后，使用Vue CLI创建一个新的项目：

vue create user-list

在创建项目时，选择默认配置即可。项目创建完成后，进入项目目录并启动开发服务器：

cd user-list
npm run serve

现在，我们已经成功创建了一个Vue项目，并可以在浏览器中访问http://localhost:8080查看项目。

用户列表展示

接下来，我们需要展示一个用户列表。为了简化示例，我们将使用一个静态的用户数据数组。在实际项目中，这些数据通常是从后端API获取的。

在src/components目录下创建一个新的组件UserList.vue，并添加以下代码：

<template>
  <div>
    <h1>用户列表</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>邮箱</th>
          <th>角色</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员' },
        { id: 2, name: '李四', email: 'lisi@example.com', role: '用户' },
        { id: 3, name: '王五', email: 'wangwu@example.com', role: '用户' },
        { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '管理员' },
        { id: 5, name: '孙七', email: 'sunqi@example.com', role: '用户' },
      ],
    };
  },
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}
</style>

在App.vue中引入并使用UserList组件：

<template>
  <div id="app">
    <UserList />
  </div>
</template>

<script>
import UserList from './components/UserList.vue';

export default {
  components: {
    UserList,
  },
};
</script>

现在，我们可以在浏览器中看到一个简单的用户列表。

实现搜索功能

接下来，我们将为用户列表添加搜索功能。用户可以通过输入关键字来搜索姓名或邮箱。

首先，在UserList.vue中添加一个搜索输入框：

<template>
  <div>
    <h1>用户列表</h1>
    <input
      type="text"
      v-model="searchQuery"
      placeholder="搜索姓名或邮箱"
    />
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>邮箱</th>
          <th>角色</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in filteredUsers" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员' },
        { id: 2, name: '李四', email: 'lisi@example.com', role: '用户' },
        { id: 3, name: '王五', email: 'wangwu@example.com', role: '用户' },
        { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '管理员' },
        { id: 5, name: '孙七', email: 'sunqi@example.com', role: '用户' },
      ],
      searchQuery: '',
    };
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user => {
        return (
          user.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          user.email.toLowerCase().includes(this.searchQuery.toLowerCase())
        );
      });
    },
  },
};
</script>

在上面的代码中，我们添加了一个searchQuery数据属性，用于存储用户输入的搜索关键字。然后，我们使用computed属性filteredUsers来根据searchQuery过滤用户列表。

现在，用户可以在输入框中输入关键字，用户列表将实时更新，只显示匹配的用户。

实现筛选功能

除了搜索功能，我们还可以为用户列表添加筛选功能。例如，用户可以根据角色筛选用户列表。

首先，在UserList.vue中添加一个角色筛选下拉框：

<template>
  <div>
    <h1>用户列表</h1>
    <input
      type="text"
      v-model="searchQuery"
      placeholder="搜索姓名或邮箱"
    />
    <select v-model="selectedRole">
      <option value="">所有角色</option>
      <option value="管理员">管理员</option>
      <option value="用户">用户</option>
    </select>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>邮箱</th>
          <th>角色</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in filteredUsers" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员' },
        { id: 2, name: '李四', email: 'lisi@example.com', role: '用户' },
        { id: 3, name: '王五', email: 'wangwu@example.com', role: '用户' },
        { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '管理员' },
        { id: 5, name: '孙七', email: 'sunqi@example.com', role: '用户' },
      ],
      searchQuery: '',
      selectedRole: '',
    };
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user => {
        const matchesSearchQuery =
          user.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          user.email.toLowerCase().includes(this.searchQuery.toLowerCase());

        const matchesRole = this.selectedRole === '' || user.role === this.selectedRole;

        return matchesSearchQuery && matchesRole;
      });
    },
  },
};
</script>

在上面的代码中，我们添加了一个selectedRole数据属性，用于存储用户选择的角色。然后，我们在filteredUsers计算属性中添加了角色筛选逻辑。

现在，用户可以通过下拉框选择角色，用户列表将实时更新，只显示匹配的角色。

分页功能

当用户列表数据量较大时，分页功能是必不可少的。接下来，我们将为用户列表添加分页功能。

首先，在UserList.vue中添加分页控件：

<template>
  <div>
    <h1>用户列表</h1>
    <input
      type="text"
      v-model="searchQuery"
      placeholder="搜索姓名或邮箱"
    />
    <select v-model="selectedRole">
      <option value="">所有角色</option>
      <option value="管理员">管理员</option>
      <option value="用户">用户</option>
    </select>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>邮箱</th>
          <th>角色</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in paginatedUsers" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role }}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员' },
        { id: 2, name: '李四', email: 'lisi@example.com', role: '用户' },
        { id: 3, name: '王五', email: 'wangwu@example.com', role: '用户' },
        { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '管理员' },
        { id: 5, name: '孙七', email: 'sunqi@example.com', role: '用户' },
        // 添加更多用户数据以测试分页功能
        { id: 6, name: '周八', email: 'zhouba@example.com', role: '用户' },
        { id: 7, name: '吴九', email: 'wujiu@example.com', role: '用户' },
        { id: 8, name: '郑十', email: 'zhengshi@example.com', role: '管理员' },
        { id: 9, name: '王十一', email: 'wangshiyi@example.com', role: '用户' },
        { id: 10, name: '李十二', email: 'lishier@example.com', role: '用户' },
      ],
      searchQuery: '',
      selectedRole: '',
      currentPage: 1,
      itemsPerPage: 5,
    };
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user => {
        const matchesSearchQuery =
          user.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          user.email.toLowerCase().includes(this.searchQuery.toLowerCase());

        const matchesRole = this.selectedRole === '' || user.role === this.selectedRole;

        return matchesSearchQuery && matchesRole;
      });
    },
    totalPages() {
      return Math.ceil(this.filteredUsers.length / this.itemsPerPage);
    },
    paginatedUsers() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.filteredUsers.slice(start, end);
    },
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
  },
};
</script>

在上面的代码中，我们添加了currentPage和itemsPerPage数据属性，用于控制当前页码和每页显示的项目数。然后，我们使用computed属性totalPages计算总页数，并使用paginatedUsers计算属性获取当前页的用户数据。

我们还添加了prevPage和nextPage方法，用于切换上一页和下一页。

现在，用户可以通过分页控件浏览用户列表，并且每页只显示指定数量的用户。

优化与总结

至此，我们已经实现了一个支持搜索、筛选和分页的用户列表组件。在实际项目中，还可以进一步优化和扩展功能，例如：

  1. 异步加载数据：在实际项目中，用户数据通常是从后端API异步加载的。可以使用axios或fetch等工具从后端获取数据，并在数据加载完成后更新用户列表。

  2. 更复杂的筛选条件：除了角色筛选，还可以添加更多的筛选条件，例如根据注册时间、状态等进行筛选。

  3. 排序功能：可以为用户列表添加排序功能，允许用户根据姓名、邮箱等字段进行排序。

  4. 响应式设计：确保用户列表在不同设备上都能良好显示，可以使用CSS媒体查询或UI框架（如Bootstrap）来实现响应式设计。

  5. 性能优化：当用户数据量较大时，可以考虑使用虚拟滚动或分页加载等技术来优化性能。

通过本文的介绍，你应该已经掌握了如何使用Vue.js实现一个支持搜索、筛选和分页的用户列表组件。希望这些内容对你有所帮助，祝你在Vue.js开发中取得更多成果！

推荐阅读：
  1. 安卓实现多条件筛选列表菜单筛选菜单
  2. 用PHP实现筛选分类列表的方法

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

vue

上一篇：ASP.NET Identity怎么使用

下一篇：vue遍历中存在el-form问题怎么解决

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号