小记：vue的表单查询

表单的查询：

通过输入多条内容，过滤出想查询出的数据

其中，数据是假数据：

test2_list: [
 {
  "external_id": '123',"behavior_type":'0',"user_id":'13844418773',"uuid":'0111111','partner':'meituan','order_id':'3823','product_name':'barbeque','ip':'123,23,23,23','ip_city':'beijing',
        'location_city':'beijing','pay_money':'32','bankcard_no':'13373462843687236482','event_result':'成功','rule_ids':'34878237',"dt":'2018.06.03','pay_account':'13844418773'
 },
 {
  "external_id": '124',"behavior_type":'1',"user_id":'13844418774',"uuid":'0101011','partner':'dianping','order_id':'3822','product_name':'rice','ip':'123,23,23,45','ip_city':'beijing',
  'location_city':'beijing','pay_money':'45','bankcard_no':'13373462843687234582','event_result':'成功','rule_ids':'34878232',"dt":'2018.06.13','pay_account':'18846453446'
 },
 {
  "external_id": '125',"behavior_type":'0',"user_id":'13844418775',"uuid":'0101012','partner':'baidu','order_id':'3826','product_name':'hotpot','ip':'123,23,23,25','ip_city':'beijing',
  'location_city':'beijing','pay_money':'67','bankcard_no':'133734628436872456482','event_result':'失败','rule_ids':'34878234',"dt":'2018.06.23','pay_account':'18846451207'
 },
 {
  "external_id": '126',"behavior_type":'0',"user_id":'13844418776',"uuid":'0101013','partner':'didi','order_id':'3820','product_name':'rice','ip':'123,23,23,89','ip_city':'beijing',
  'location_city':'beijing','pay_money':'23','bankcard_no':'133734628436856675482','event_result':'成功','rule_ids':'34878256',"dt":'2018.06.02','pay_account':'18643916765'
 },
 {
  "external_id": '127',"behavior_type":'1',"user_id":'13844418778',"uuid":'0101014','partner':'tx','order_id':'3828','product_name':'barbeque','ip':'123,23,23,00','ip_city':'beijing',
  'location_city':'beijing','pay_money':'12','bankcard_no':'1337346284365675636482','event_result':'成功','rule_ids':'34878278',"dt":'2018.06.01','pay_account':'13844418774'
 },
 
 {
  "external_id": '128',"behavior_type":'1',"user_id":'13844418773',"uuid":'0101010','partner':'meituan','order_id':'3823','product_name':'barbeque','ip':'123,23,23,23','ip_city':'beijing',
  'location_city':'beijing','pay_money':'32','bankcard_no':'13373462843687236482','event_result':'成功','rule_ids':'34878237',"dt":'2018.06.03','pay_account':'13844418773'
 },
 {
  "external_id": '129',"behavior_type":'0',"user_id":'13844418773',"uuid":'0101010','partner':'meituan','order_id':'3823','product_name':'barbeque','ip':'123,23,23,23','ip_city':'beijing',
  'location_city':'beijing','pay_money':'32','bankcard_no':'13373462843687236482','event_result':'成功','rule_ids':'34878237',"dt":'2018.06.03','pay_account':'13844418773'
 },
 {
  "external_id": '130',"behavior_type":'1',"user_id":'13844418773',"uuid":'0101010','partner':'meituan','order_id':'3823','product_name':'barbeque','ip':'123,23,23,23','ip_city':'beijing',
  'location_city':'beijing','pay_money':'32','bankcard_no':'13373462843687236482','event_result':'成功','rule_ids':'34878237',"dt":'2018.06.03','pay_account':'13844418773'
 },
 {
  "external_id": '131',"behavior_type":'0',"user_id":'13844418773',"uuid":'0101010','partner':'meituan','order_id':'3823','product_name':'barbeque','ip':'123,23,23,23','ip_city':'beijing',
  'location_city':'beijing','pay_money':'32','bankcard_no':'13373462843687236482','event_result':'成功','rule_ids':'34878237',"dt":'2018.06.03','pay_account':'13844418773'
 },
 {
  "external_id": '132',"behavior_type":'0',"user_id":'13844418773',"uuid":'0101010','partner':'meituan','order_id':'3823','product_name':'barbeque','ip':'123,23,23,23','ip_city':'beijing',
  'location_city':'beijing','pay_money':'32','bankcard_no':'13373462843687236482','event_result':'成功','rule_ids':'34878237',"dt":'2018.06.03','pay_account':'13844418773'
 },
 {
  "external_id": '133',"behavior_type":'1',"user_id":'13844418773',"uuid":'0101010','partner':'meituan','order_id':'3823','product_name':'barbeque','ip':'123,23,23,23','ip_city':'beijing',
  'location_city':'beijing','pay_money':'32','bankcard_no':'13373462843687236482','event_result':'成功','rule_ids':'34878237',"dt":'2018.06.03','pay_account':'13844418773'
 },
 {
  "external_id": '134',"behavior_type":'0',"user_id":'13844418773',"uuid":'0101010','partner':'meituan','order_id':'3823','product_name':'barbeque','ip':'123,23,23,23','ip_city':'beijing',
  'location_city':'beijing','pay_money':'32','bankcard_no':'13373462843687236482','event_result':'成功','rule_ids':'34878237',"dt":'2018.06.03','pay_account':'13844418773'
 },
 {
  "external_id": '145',"behavior_type":'0',"user_id":'13844418773',"uuid":'0101010','partner':'meituan','order_id':'3823','product_name':'barbeque','ip':'123,23,23,23','ip_city':'beijing',
  'location_city':'beijing','pay_money':'32','bankcard_no':'13373462843687236482','event_result':'成功','rule_ids':'34878237',"dt":'2018.06.03','pay_account':'13844418773'
 }
],

*通过计算属性筛选出查询的数据：

computed:{
 searched_data: function () {
   let arrList = [];//存放数据
    let list = this.test2_list;
  for (let i = 0;i < this.test2_list.length;i++){
  if (list[i].uuid.search(this.search_uuid) != -1 &&list[i].user_id.search(this.search_userid)!=-1) {
   arrList.push(this.test2_list[i]);
   }
  }
  return arrList;
 }
},

HTML：table显示的数据：

<table v-show="show" class="table table-striped table-bordered table-hover " :data="searched_data">
  <thead>
  <tr>
    <th v-for="(table,index) in query_list_header" :key="index">{{table.title}}</th>
  </tr>
  </thead>
  <tbody >
  <tr v-for="(items,index) of searched_data" :key="index">
    <td v-for="item of items" >{{item}}</td>
    <td>
      <router-link to="showInfo">详情信息</router-link>
    </td>
  </tr>
  
  </tbody>
</table>