在vue3中 两个表格左右排列 数据可以左右切换类似穿梭狂，两个表格上方有搜索框，前端如何做到搜索功能，模糊匹配，

对于搜索功能，可使用 Vue3 中提供的响应式数据和计算属性来实现。在搜索框中输入关键词时，可以将关键词绑定到一个响应式数据上，然后通过计算属性实现过滤出符合条件的数据。

具体实现步骤如下：

1. 在 data 中定义一个响应式数据用于存储搜索框中的关键词：

data() {
  return {
    keyword: '',
    // 其他数据...
  }
}

2. 在表格中通过 v-model 将关键词与搜索框进行双向绑定：

<input v-model="keyword" />

3. 在计算属性中实现数据过滤，返回符合条件的数据：

computed: {
  filteredData() {
    const keyword = this.keyword.trim().toLowerCase()
    if (!keyword) {
      return this.data // 没有关键词，返回全部数据
    }
    return this.data.filter(item => {
      // 根据关键词进行模糊匹配
      return Object.values(item).some(val => {
        return String(val).toLowerCase().includes(keyword)
      })
    })
  }
}

4. 在表格中使用 filteredData 替代原始数据进行渲染：

<template>
  <table>
    <tbody>
      <tr v-for="item in filteredData" :key="item.id">
        <!-- 表格内容 -->
      </tr>
    </tbody>
  </table>
</template>

通过以上步骤，即可实现在两个表格中进行搜索，并且支持模糊匹配。