douweida2878 2019-05-07 08:25
浏览 72

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

I just started with vue.js and i want to create a filter search field for an existing html table. Here is what i'm having right now (The table is created with laravels blade templating and doesn't show the entries. I found a lot of tutorials for filter search but none for a table, but only for lists.

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>

Can anybody help me to find a solution (link to tutorial or an explenation) to filter the table with a searchbar?

</div>
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 GDI处理通道视频时总是带有白色锯齿
    • ¥20 用雷电模拟器安装百达屋apk一直闪退
    • ¥15 算能科技20240506咨询(拒绝大模型回答)
    • ¥15 自适应 AR 模型 参数估计Matlab程序
    • ¥100 角动量包络面如何用MATLAB绘制
    • ¥15 merge函数占用内存过大
    • ¥15 Revit2020下载问题
    • ¥15 使用EMD去噪处理RML2016数据集时候的原理
    • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大
    • ¥15 单片机无法进入HAL_TIM_PWM_PulseFinishedCallback回调函数