element plus ts 输入框 数据检索

如果你想用Element Plus的输入框进行数据检索，可以通过以下步骤实现：

1. 在输入框中绑定一个变量，用来存储用户输入的关键字。

<el-input v-model="keyword"></el-input>

2. 在需要检索的数据源中绑定一个变量，用来存储所有的数据。

interface Item {
  name: string;
  age: number;
}

export default {
  data() {
    return {
      items: [] as Item[],
    };
  },
  mounted() {
    this.fetchItems();
  },
  methods: {
    async fetchItems() {
      const res = await axios.get('/api/items');
      this.items = res.data;
    },
  },
};

3. 在输入框上绑定一个`@input`事件，每次用户输入时触发该事件，根据用户输入的关键字过滤数据源中的数据。

<el-input v-model="keyword" @input="filterItems"></el-input>

export default {
  data() {
    return {
      keyword: '',
      items: [] as Item[],
    };
  },
  mounted() {
    this.fetchItems();
  },
  methods: {
    async fetchItems() {
      const res = await axios.get('/api/items');
      this.items = res.data;
    },
    filterItems() {
      // 使用关键字过滤数据
      const filteredItems = this.items.filter(item => item.name.includes(this.keyword));
      // 更新表格数据
      this.$refs.table.setData(filteredItems);
    },
  },
};

这样，用户在输入框中输入关键字时，表格中会即时显示符合条件的数据。你也可以根据具体的需求对过滤器进行修改。注意，这里使用了`$refs`来访问表格组件，因此需要在表格组件上添加一个`ref`属性。

<el-table :data="items" ref="table">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>