Javascript 使用vue.js筛选搜索现有表

我刚从vue.js开始，我想为现有html表创建一个过滤器搜索字段。这是我现在正在做的（该表是用laravels刀片模板创建的，不显示条目。我找到了很多关于过滤器搜索的教程，但没有一个用于表，而只用于列表）

newvue({
el:“容器”，
数据：{
汽车：[
//你的汽车在哪？
],
搜索：“
}
})

.table\u预订系统{
表布局：固定；
边界塌陷：塌陷；
宽度：100%；
左边距：自动；
右边距：自动；
文本对齐：左对齐；
填充顶部：16px；
填充底部：16px；
边框：1px实心#ccc！重要；
}
.table_预订系统tbody{
宽度：100%；
溢出：自动；
文本对齐：居中；
}
.table_预订系统tr{
边框底部：1px实心#ddd；
}
.table_Bookingsystem thead>tr{
背景色：$btBizNav！重要；
}
.table_预订系统thead{
背景色：$btBizNav！重要；
文本对齐：居中；
颜色：#fff；
}
.table_Bookingsystem th、.table_Bookingsystem td{
填充物：5px；
文本对齐：居中；
}
.table\u预订系统tbody tr:n子项（偶数）{
背景色：#e4ebf2；
颜色：#000；
}
1.书架{
填充顶部：200px！重要；
填充底部：200px！重要；
显示：flex！重要；
对齐项目：居中！重要；
证明内容：中心！重要；
背景色：#FFFFFF；
保证金：16px！重要；
盒影：0.4px 10px 0 rgba（0,0,0,0.2），0.4px 20px 0 rgba（0,0,0,0.19）；
}
{
背景色：#FFFFFF！重要；
填充：1px；
保证金：16px！重要；
盒影：0.4px 10px 0 rgba（0,0,0,0.2），0.4px 20px 0 rgba（0,0,0,0.19）；
}
表>thead>tr{
位置：粘性；
排名：0；
宽度：100%；
背景色：#000000；
颜色：#FFFFFF；
}
.盒子{
浮动：左！重要；
保证金：5px！重要；
背景：#eee！重要；
}
按钮盒{
填充：15px！重要；
}
输入框{
左侧填充：15px！重要；
填充顶部：23px！重要；
填充底部：7px！重要；
}
.倒圆框{
边框左下半径：10px！重要；
边框右下角半径：10px！重要；
}
.bg深蓝色{
背景色：#1d68a7；
}
.表格行{
光标：指针；
}
输入[type=“date”]：在{
内容：attr（占位符）！重要；
颜色：#aaa；
右边距：0.5em；
}
输入[type=“date”]：焦点：在，
输入[type=“date”]：有效：之前{
内容：“；
}
#面板{
显示：无；
}
mr-10{
右边距：20px！重要；
}
.1分部{
显示：内联块；
}
.第2分部{
显示：内联块；
}
贝特兰特海军基地{
背景色：#000！重要；
}
.bg桌面{
背景色：#D8D8D8！重要；
}
.表格行{
光标：指针；
}
.桌面悬停t车身tr：悬停{
颜色：#212529；
背景色：rgba（0,0,0,0.075）；
}
.表悬停。表主：悬停{
背景色：#b0d4f1；
}
.table hover.table primary:hover>td，
.table hover.table主：hover>th{
背景色：#b0d4f1；
}

输入名称：
#
自动的
伊梅
海马施塔特
德泽伊特斯塔特酒店
@foreach（$cars作为$car）
{{$loop->iteration}
{{$car->name}
{{$car->IMEI}
@endforeach

我建议使用

vue

渲染表格。如果您确实想使用2渲染引擎，也可以尝试将

v-if

添加到所有

tr

。