vue实现搜索过滤效果实现搜索过滤效果
本文实例为大家分享了vue实现搜索过滤效果的具体代码,供大家参考,具体内容如下
html:
<table id="tfhover_1" class="tftable_1" border="1">
<tr>
<th>名称</th>
<th>链接状态</th>
<th>IP</th>
<th>特例类型</th>
<th>所属城市</th>
<th>所属机房</th>
</tr>
<tr v-cloak v-for="(item, index) of slist">
<td>{{item.name}}</td>
<td>{{item.username}}</td>
<td>{{item.email}}</td>
<td>{{item.sex}}</td>
<td>{{item.province}}</td>
<td>{{item.hobb}}</td>
<!--<td><a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="showOverlay(index)">修改</a> | <a href="javascript:;" rel="external
nofollow" rel="external nofollow" @click="del(index)">删除</a></td>-->
</tr>
</table>
css:
[v-cloak] {
display: none
}
table {
border: 1px solid #ccc;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
/*margin-top: 10px;*/
width: 100%;
margin-top: 45px;
}
table td,
table th {
height: 30px;
border: 1px solid #ccc;
background: #fff;
font-size: 2vh;
padding: 12px 3px 6px 8px;
color: #666666;
font-weight: 300;
}
table th:first-child {
width: 4rem;
}
.container,
.st {
/*width: 1000px;*/
margin: 10px auto 0;
font-size: 13px;
font-family: '微软雅黑'
}
.container .search {
font-size: 15px;
padding: 4px;
}
.container .add {
padding: 5px 15px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 6;
background: rgba(0, 0, 0, 0.7);
}