我刚开始使用vue.js,我想为现有的html表创建过滤器搜索字段。这就是我现在所拥有的(该表是使用laravel刀片模板创建的,并且不显示条目。我发现了很多用于过滤器搜索的教程,但没有针对表的教程,而仅针对列表。
new Vue({
el:"container",
data:{
Cars:[
//Hier Autos eintragen?
],
search:""
}
})
.table_Bookingsystem{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
padding-top: 16px;
padding-bottom: 16px;
border: 1px solid #ccc !important;
}
.table_Bookingsystem tbody{
width: 100%;
overflow: auto;
text-align: center;
}
.table_Bookingsystem tr{
border-bottom: 1px solid #ddd;
}
.table_Bookingsystem thead > tr{
background-color: $btBizNav !important;
}
.table_Bookingsystem thead {
background-color: $btBizNav !important;
text-align: center;
color:#fff;
}
.table_Bookingsystem th, .table_Bookingsystem td {
padding: 5px;
text-align: center;
}
.table_Bookingsystem tbody tr:nth-child(even) {
background-color: #e4ebf2;
color: #000;
}
.bookbox{
padding-top: 200px !important;
padding-bottom: 200px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #FFFFFF;
margin: 16px !important;
box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
}
.tablebox{
background-color: #FFFFFF !important;
padding: 1px;
margin: 16px !important;
box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
}
table>thead>tr{
position: sticky;
top: 0;
width: 100%;
background-color: #000000;
color: #FFFFFF;
}
.box{
float: left !important;
margin: 5px !important;
background: #eee !important;
}
button.box{
padding: 15px !important;
}
input.box{
padding-left: 15px !important;
padding-top: 23px !important;
padding-bottom: 7px !important;
}
.roundedbox-down{
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
.bg-darkblue{
background-color: #1d68a7;
}
.table-row{
cursor:pointer;
}
input[type="date"]:before {
content: attr(placeholder) !important;
color: #aaa;
margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"]:valid:before {
content: "";
}
#panel{
display:none;
}
.mr-10{
margin-right: 20px !important;
}
.div1{
display: inline-block;
}
.div2{
display: inline-block;
}
.bg-bertrandt-nav{
background-color: #000 !important;
}
.bg-table-top{
background-color: #D8D8D8 !important;
}
.table-row {
cursor: pointer;
}
.table-hover tbody tr:hover {
color: #212529;
background-color: rgba(0, 0, 0, 0.075);
}
.table-hover .table-primary:hover {
background-color: #b0d4f1;
}
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
background-color: #b0d4f1;
}
<div class="container">
<div class="well">
<form class="form-inline">
<h6><label>Enter name:</label></h6>
<input type="text" name="name" class="form-control" v-model="search">
</form>
</div>
</div>
<table class="table_Bookingsystem table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Auto</th>
<th scope="col">IMEI</th>
<th scope="col">Heimatstadt</th>
<th scope="col">derzeitige Stadt</th>
</tr>
</thead>
<tbody>
@foreach($cars as $car)
<tr class="table-row clickable-row" data-href='/cars/{{$car->id}}'>
<th>{{$loop->iteration}}</th>
<td>{{$car->name}}</td>
<td>{{$car->IMEI}}</td>
<td>
<?php
$city = Illuminate\Support\Facades\DB::table('cities')->where('id','=', $car->id_homeCity)->get('name');
echo $city[0]->name; ?>
</td>
<td>
<?php
$city = Illuminate\Support\Facades\DB::table('cities')->where('id','=', $car->id_currentCity)->get();
echo $city[0]->name; ?>
</td>
</tr>
@endforeach
</tbody>
</table>
有人可以帮我找到解决方案(链接到教程或专享课程)以用搜索栏过滤表格吗?