Javascript Vue表行实时搜索和筛选，无需插入数据方法

我将直接在vue模板中创建一个表元素，而不是在脚本数据方法中解析表行数据。我的问题是如何实现表格实时搜索功能？在live search输入中输入值时，仅显示匹配的行。我的大致想法是向每个

tr

或

td

元素添加

v-if

指令，并且每当输入值时，只有内容匹配的

tr

元素将显示，其他元素将隐藏。但这有点浪费时间。你有更好的主意吗？先谢谢你

单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利

您可以尝试这样做，但这只是一个坏主意…¨我之所以想找到替代解决方案，是因为我有许多表要插入到不同的页面中。如果我在data方法中逐个键入所有值，这将非常耗时。