使用vue.js过滤搜索现有表

时间:2019-05-07 08:25:43

标签: javascript php laravel vue.js

我刚开始使用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>

有人可以帮我找到解决方案(链接到教程或专享课程)以用搜索栏过滤表格吗?

0 个答案:

没有答案