javascript - vuejs 在搜索中多次过滤

Question

我想用vue js搜索，正常搜索可以，但是如果我们考虑到列表中有1000条记录，当用户想过滤搜索时，我可以应用什么样的 Action ？我不明白是否有这个插件，我搜索并找不到它。我画了这样一个方式，想着比如有“状态被屏蔽”和“关闭”的用户想被列入过滤，如果他们想相应的从传入列表中搜索，我就画了这样一个方式，但是正如我所说，我是 vuejs 的新手，如果你能举个例子。从现在开始谢谢你。

const app = new Vue({
    el: '#app',
    data: {
        search: '',
        userList: [
            {
                id: 1,
                name: "Prem",
                age: 18,
                status: "close",
                gender: "male",
            },
            {
                id: 2,
                name: "Chandu",
                status: "close",
                age: 20,
                gender: "female",
            },
            {
                id: 3,
                name: "Shravya",
                status: "open",
                age: 35,
                gender: "female",
            },
            {
                id: 4,
                name: "Shravya",
                status: "blocked",
                age: 35,
                gender: "female",
            }
        ]
    },
    computed: {
        filteredAndSorted() {
            function compare(a, b) {
                if (a.name < b.name) return -1;
                if (a.name > b.name) return 1;
                return 0;
            }

            return this.userList.filter(user => {
                return user.name.toLowerCase().includes(this.search.toLowerCase())
            }).sort(compare)
        }
    }
});
$(document).ready(function () {
    $('.dropdown-submenu a.test').on("click", function (e) {
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
    });
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

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

tr:nth-child(even) {
    background-color: #dddddd;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Filtered
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Name</a></li>
        <li><a tabindex="-1" href="#">Age</a></li>
        <li><a tabindex="-1" href="#">Gender</a></li>
        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">Status <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li>
                    <input type="checkbox" value="close">
                    <button>Close</button>
                </li>
                <li>
                    <input type="checkbox" value="open">
                    <button>Open</button>
                </li>
                <li>
                    <input type="checkbox" value="blocked">
                    <button>Blocked</button>
                </li>
            </ul>
        </li>
    </ul>
</div>
<div class="search-wrapper">
    <input type="text" v-model="search" placeholder="Search title.."/>
</div>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Status</th>
        <th>Gender</th>
    </tr>
    <tr v-for="user in filteredAndSorted">
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.status }}</td>
        <td>{{ user.gender }}</td>
    </tr>

</table>
</div>

Answer 1

我给你做了一个片段，看看(不需要jquery):

const app = new Vue({
    el: '#app',
    data: {
        search: '',
        selected: 'name',
        choice: '',
        choicesArr: [],
        options: [
          { text: 'Name', value: 'name' },
          { text: 'Age', value: 'age' },
          { text: 'Gender', value: 'gender' },
          { text: 'Status', value: 'status' }
        ],
        userList: [
            {
                id: 1,
                name: "Prem",
                age: 18,
                status: "close",
                gender: "male",
            },
            {
                id: 2,
                name: "Chandu",
                status: "close",
                age: 20,
                gender: "female",
            },
            {
                id: 3,
                name: "Shravya",
                status: "open",
                age: 35,
                gender: "female",
            },
            {
                id: 4,
                name: "Shravya",
                status: "blocked",
                age: 35,
                gender: "female",
            }
        ]
    },
    computed: {
      filteredAndSorted() {
        function compare(a, b) {
          if (a[this.selected] < b[this.selected]) return -1;
          if (a[this.selected] > b[this.selected]) return 1;
          return 0;
        }
        return this.userList.filter(user => {
          if (this.selected === "age") {
            if(this.choicesArr.length) {
              return this.choicesArr.indexOf(user[this.selected]) >= 0
            } else {
              return !this.search || user[this.selected] === Number(this.search)
            }
          } else {
            if(this.choicesArr.length) {
              return this.choicesArr.indexOf(user[this.selected]) >= 0
            } else {
              return user[this.selected].toLowerCase().includes(this.search.toLowerCase())
            }
          }
        }).sort(compare)
      },
      choices: function() {
        return [...new Set(this.userList.map(user => user[this.selected]))];
      }  
    },
    methods: {
      addChoice() {
        this.choicesArr.push(this.choice)
        console.log(this.choicesArr)
      },
      reset() {
        this.choice = ""
        this.choicesArr = []
      }
    }
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

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

tr:nth-child(even) {
    background-color: #dddddd;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <select v-model="selected" >
    <option value="" disabled>Select option</option>
    <option v-for="option in options" v-bind:value="option.value" >
      {{ option.text }}
    </option>
  </select>
  <select v-model="choicesArr" multiple>
    <option v-for="option in choices" v-bind:value="option" @click="addChoice">
      {{ option }}
    </option>
  </select>
  <button @click="reset">Clear filters</button>
  <div class="search-wrapper">
      <input type="text" v-model="search" placeholder="Search title.."/>
  </div>
  <table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Status</th>
        <th>Gender</th>
    </tr>
    <tr v-for="user in filteredAndSorted">
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.status }}</td>
        <td>{{ user.gender }}</td>
    </tr>

</table>
</div>