如何在vuejs的表格中添加過濾器和搜索？

我正在學習vue js並構建SPA我想知道如何添加過濾器並使用輸入標籤進行搜索。我也想添加一個功能，當我在一個特定的名稱單擊表應該打開該人員的輪廓也全選功能如何在vuejs的表格中添加過濾器和搜索？

<template> 
    <div class="animated fadeIn"> 
    <input type="text" placeholder="Enter Name" v-model="searchText"> 
    <table class="table table-striped"> 
       <thead> 
       <tr> 
        <th>Name</th> 
        <th>College Name</th> 
        <th>College City</th> 
        <th>Level Name</th> 
        <th>Submitted</th> 
        <th>Pending</th> 
        <th>Completed</th> 
        <th>Approved</th> 
        <th>Rejected</th> 

       </tr> 
       </thead> 
       <tbody> 
       <tr v-for="profile in profilesdata"> 
        <td>{{profile.first_name}}</td> 
        <td>{{profile.college_name}}</td> 
        <td>{{profile.college_city}}</td> 
        <td>{{profile.level_name}}</td> 
        <td>{{profile.submitted}}</td> 
        <td>{{profile.pending}}</td> 
        <td>{{profile.complete}}</td> 
        <td>{{profile.approve}}</td> 
        <td>{{profile.rejected}}</td> 
       </tr> 
       </tbody> 
      </table> 
    </div> 
</template> 

<script> 
export default{ 
    name: 'profiles', 

    data() { 
     return{ 
     profilesdata: [] 
     } 
    }, 

    created:function(){ 
     this.loadlike() 
    }, 
    methods:{ 
     loadlike:function(){ 

     this.$http.get('/api/profiles').then(function (res) { 
      this.profilesdata = res.body 
      console.log(53+this.profiles) 
     })}}} 
</script>

來源

2017-08-07 Kushagra Agarwal

你可以做一個計算用於過濾的數據：

computed: { 
    filteredProfiles() { 
     return this.profilesdata.filter(profile => { 
      // TODO filter profile with this.searchText 
     }) 
    } 
}

，然後通過篩選數據中的v-變革循環：<tr v-for="profile in filteredProfiles">

來源

2017-08-07 14:56:18 sroes

適用於搜索欄如果我想要多個過濾器 –

你很可能返回而不是profilesData

計算列表

有很多不同的方式來做到這一點，這只是其中之一。

你可以將那個searchString傳遞給API並返回結果列表，這一切都來自於你真的需要什麼。

來源

2017-08-07 15:05:27 remmargorp

如何在vuejs的表格中添加過濾器和搜索？

回答

相關問題