如何在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的表格中添加过滤器和搜索？

回答

相关问题