Vue.js用户列表表格实现每列独立文本过滤功能问题咨询

核心思路 #

• 放弃原生DOM操作逻辑，改用Vue数据驱动的计算属性实现过滤，避免手动操作元素显隐
• 在data中为每一列单独定义过滤变量，独立维护各列的过滤条件
• 所有过滤逻辑统一在计算属性中完成，直接渲染过滤后的结果集

完整修正代码 #

模板部分 #

<template>
  <table id="tblUsers">
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
        <th>Email Address</th>
        <th>Status</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td><input v-model="filters.firstName" type="text" placeholder="搜索名字"/></td>
        <td><input v-model="filters.lastName" type="text" placeholder="搜索姓氏"/></td>
        <td><input v-model="filters.username" type="text" placeholder="搜索用户名"/></td>
        <td><input v-model="filters.email" type="text" placeholder="搜索邮箱"/></td>
        <td>
          <select v-model="filters.status">
            <option value="">Show All</option>
            <option value="Active">Active</option>
            <option value="Disabled">Disabled</option>
          </select>
        </td>
      </tr>
      <!-- 直接遍历过滤后的用户列表 -->
      <tr v-for="user in filteredUsers" :key='user.username'>
        <td> {{user.firstName}} </td>
        <td> {{user.lastName}} </td>
        <td> {{user.username}} </td>
        <td> {{user.emailAddress}} </td>
        <td> {{user.status}} </td>  
      </tr>
    </tbody>
  </table>
</template>

逻辑部分 #

<script>
export default {
  name: 'user-list',
  data() {
    return {
      // 原始用户数据不变
      users: [
        { firstName: 'John', lastName: 'Smith', username: 'jsmith', emailAddress: 'jsmith@gmail.com', status: 'Active' },
        { firstName: 'Anna', lastName: 'Bell', username: 'abell', emailAddress: 'abell@yahoo.com', status: 'Active' },
        { firstName: 'George', lastName: 'Best', username: 'gbest', emailAddress: 'gbest@gmail.com', status: 'Disabled' },
        { firstName: 'Ben', lastName: 'Carter', username: 'bcarter', emailAddress: 'bcarter@gmail.com', status: 'Active' },
        { firstName: 'Katie', lastName: 'Jackson', username: 'kjackson', emailAddress: 'kjackson@yahoo.com', status: 'Active' },
        { firstName: 'Mark', lastName: 'Smith', username: 'msmith', emailAddress: 'msmith@foo.com', status: 'Disabled' }
      ],
      // 各列独立过滤条件
      filters: {
        firstName: '',
        lastName: '',
        username: '',
        email: '',
        status: ''
      }
    };
  },
  computed: {
    filteredUsers() {
      // 解构获取所有过滤条件
      const { firstName, lastName, username, email, status } = this.filters
      return this.users.filter(user => {
        // 每列的匹配逻辑，空值代表不过滤该列
        const matchFirstName = firstName === '' || user.firstName.toUpperCase().includes(firstName.toUpperCase())
        const matchLastName = lastName === '' || user.lastName.toUpperCase().includes(lastName.toUpperCase())
        const matchUsername = username === '' || user.username.toUpperCase().includes(username.toUpperCase())
        const matchEmail = email === '' || user.emailAddress.toUpperCase().includes(email.toUpperCase())
        const matchStatus = status === '' || user.status === status
        // 必须所有列条件都满足才返回
        return matchFirstName && matchLastName && matchUsername && matchEmail && matchStatus
      })
    }
  }
};
</script>

关键改动说明 #

1. 移除了所有原生DOM操作代码，所有过滤逻辑通过计算属性filteredUsers实现，性能更优，也符合Vue开发规范
2. 新增了filters对象统一管理所有列的过滤条件，每个字段对应一列的输入值，天然实现各列过滤独立
3. 修正了自定义标签tr2、td2的错误，使用标准HTML表格标签
4. 列表key修改为唯一的username字段，避免列表渲染异常

内容的提问来源于stack exchange，提问作者narcidius