表单的查询:
通过输入多条内容,过滤出想查询出的数据
其中,数据是假数据:
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>