javascript - 在 Vue Js 中的表格上渲染多个过滤器

Question

我正在尝试在Vuejs中构建一个表过滤器，它根据要求过滤表，我有两个单独的输入字段，它们过滤一个公共(public)表我的表代码是一些东西像这样:

<div class="col-sm-4">
    <div class="form-group">
        <label class="control-label">Search by company name</label>
        <input type="text" v-model="search_by_name" placeholder="Search by company name" class="form-control">
    </div>
</div>
<div class="col-sm-2">
    <div class="form-group">
        <label class="control-label">Search by email</label>
        <input type="text" v-model="search_by_email" placeholder="Search by email" class="form-control">
    </div>
</div>
<div class="col-sm-3">
    <div class="form-group">
        <label class="control-label" for="tags">Search by tags</label>
        <select name="status" id="tags" class="form-control">
            <option value="1" selected="">Completed</option>
            <option value="0">Pending</option>
        </select>
    </div>
</div>
<div class="table-responsive">
    <table class="table table-striped">
        <tbody>
            <tr v-for="item in tableFilter">
               <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.city }}</td>
                <td>{{ item.number }}</td>
                <td>{{ item.email }}</td>
                <td><router-link :to="{name: 'company-update', params: {id: item.id}}"><i class="fa fa-pencil-square-o text-navy"></i></router-link></td>
                <td><a @click.prevent="deleteCompany(item.id)"><i class="fa fa-trash-o text-navy"></i></a></td>
            </tr>
        </tbody>
    </table>
</div>

为了进行过滤，我的 vue 实例中有以下内容:

export default {
data(){
    return {
        search_by_name: '',
        search_by_email: '',
        model: {},
        columns: {},
        }
    },
props: ['source'],
created() {
        this.fetchIndexData()
    },
methods: {
    fetchIndexData() {
            axios.get('/companies').then(response => {
                Vue.set(vm.$data, 'model', response.data.model)
                Vue.set(vm.$data, 'columns', response.data.columns)
            }).catch(response => {
//                console.log(response)
            })
        },
    findBy: function(list, value, column) {
            return list.filter(function(item) {
                return item[column].includes(value)
            })
        }
    },
computed: {
        tableFilter: function () {
            if(this.model.data)
            {
                return this.findBy(this.model.data, this.search_by_name, 'name')
            }
        }
    }
}

当前名称搜索按要求正常工作，我想将此搜索与电子邮件搜索绑定(bind)，如 this.search_by_email 或通过 html 中提到的 drop-down部分。

Answer 1

1. 您需要在选择中对值进行建模

     <select name="status" id="tags" class="form-control" v-model="pending_or_completed">
         <option value="1">Completed</option>
         <option value="0">Pending</option>
     </select>
   

2. 您需要计算来测试所有条件

   tableFilter() {
     if (this.model.data) {
       return this.model.data.filter((item) => 
         item.name.includes(this.search_by_name)
         && item.email.includes(this.search_by_email)
         && item.status === this.pending_or_completed);
     }
   }
   

new Vue({
  el: '#app',
  data: {
    search_by_name: 'name',
    search_by_email: '',
    pending_or_completed: '1',
    model: {
      data: [{
          id: 1,
          name: 'one',
          email: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0b02022d020308430e0200" rel="noreferrer noopener nofollow">[email protected]</a>',
          status: '1'
        },
        {
          id: 2,
          name: 'two',
          email: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7b4a795a1a2bafbb6bab8" rel="noreferrer noopener nofollow">[email protected]</a>',
          status: '0'
        },
        {
          id: 5,
          name: 'five',
          email: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ce8f4f9dcfaf5eaf9b2f9f8e9" rel="noreferrer noopener nofollow">[email protected]</a>',
          status: '0'
        }
      ]
    }
  },
  computed: {
    tableFilter() {
      if (this.model.data) {
        return this.model.data.filter((item) => item.name.includes(this.search_by_name) && item.email.includes(this.search_by_email) && item.status === this.pending_or_completed);
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
  <div class="col-sm-4">
    <div class="form-group">
      <label class="control-label">Search by company name</label>
      <input type="text" v-model="search_by_name" placeholder="Search by company name" class="form-control">
    </div>
  </div>
  <div class="col-sm-2">
    <div class="form-group">
      <label class="control-label">Search by email</label>
      <input type="text" v-model="search_by_email" placeholder="Search by email" class="form-control">
    </div>
  </div>
  <div class="col-sm-3">
    <div class="form-group">
      <label class="control-label" for="tags">Search by tags</label>
      <select name="status" id="tags" class="form-control" v-model="pending_or_completed">
          <option value="1">Completed</option>
          <option value="0">Pending</option>
      </select>
    </div>
  </div>
  <div class="table-responsive">
    <table class="table table-striped">
      <tbody>
        <tr v-for="item in tableFilter">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.city }}</td>
          <td>{{ item.number }}</td>
          <td>{{ item.email }}</td>
          <td>
            <router-link :to="{name: 'company-update', params: {id: item.id}}"><i class="fa fa-pencil-square-o text-navy"></i></router-link>
          </td>
          <td><a @click.prevent="deleteCompany(item.id)"><i class="fa fa-trash-o text-navy"></i></a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>