<template> <a-table :columns="columns" :data-source="gridInfo"> </a-table> </template> <script> export default { data() { return { columns: [ { title: '姓名', dataIndex: 'name' }, { title: '年龄', dataIndex: 'age' }, { title: '性别', dataIndex: 'gender' } ], gridInfo: [] } , } } </script>在表格外使用input框实现搜索功能

要在表格外使用输入框来实现搜索功能，你可以在模板中添加一个 `<a-input>` 组件，并绑定一个 `searchText` 变量来存储输入的搜索关键字。然后，在 `filteredData` 计算属性中，根据 `searchText` 对 `gridInfo` 进行过滤。

以下是修改后的代码示例：

<template>
  <div>
    <a-input v-model="searchText" placeholder="请输入关键字" />

    <a-table :columns="columns" :data-source="filteredData"></a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      columns: [
        { title: '姓名', dataIndex: 'name' },
        { title: '年龄', dataIndex: 'age' },
        { title: '性别', dataIndex: 'gender' }
      ],
      gridInfo: []
    };
  },
  computed: {
    filteredData() {
      if (this.searchText === '') {
        return this.gridInfo;
      }

      return this.gridInfo.filter((item) => {
        return item.name.includes(this.searchText);
      });
    }
  }
};
</script>

在这个示例中，我们在模板中添加了一个 `<a-input>` 组件，并使用 `v-model` 指令将输入的内容绑定到 `searchText` 变量上。

然后，在计算属性 `filteredData` 中，我们根据 `searchText` 对 `gridInfo` 进行过滤。如果 `searchText` 为空，则直接返回原始的 `gridInfo` 数据；否则，使用 `filter` 方法对 `gridInfo` 进行过滤，只保留满足条件的数据。

希望这个示例对你有帮助！