在输入框中输入姓名在表格中自动弹出该输入子

在前端开发中，尤其是用Vue.js构建应用时，如果你想实现在输入框中输入姓名后立即在表格中匹配并显示相关的行，通常会采用双向绑定和搜索功能。这里有一个简化版的例子：

首先，在HTML里，创建一个输入框和一个表格：

<template>
  <div>
    <input type="text" v-model="searchName" placeholder="输入姓名..." @input="filterTableData">
    
    <table>
      <thead>
        <tr>
          <th>Name</th>
          // ... 其他列 ...
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in filteredData" :key="index">
          <td>{{ row.name }}</td>
          <!-- 显示其他列内容... -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

然后，在`script`部分编写JavaScript逻辑：

<script>
export default {
  data() {
    return {
      searchName: '',
      allData: [
        // 模拟一些姓名数据
        { name: '张三', ... },
        { name: '李四', ... },
        // ...
      ],
    }
  },
  computed: {
    filteredData() {
      if (!this.searchName) {
        return this.allData;
      }
      return this.allData.filter(item => item.name.includes(this.searchName));
    },
  },
  methods: {
    filterTableData(e) {
      this.searchName = e.target.value; // 获取输入框的实时值
    },
  },
};
</script>

在这个例子中，`v-model`将输入框的值绑定到`searchName`，每当输入改变时，`filterTableData`方法会被触发，更新`filteredData`计算属性。计算属性内的`filter`函数会过滤出包含输入姓名的所有对象，从而动态更新表格。