element plus ts 输入框 从返回数据检索
时间: 2023-07-22 17:11:09 浏览: 59
如果你想用Element Plus的输入框从返回数据中检索,你可以通过以下步骤实现:
1. 在输入框中绑定一个变量,用来存储用户输入的关键字。
```html
<el-input v-model="keyword"></el-input>
```
2. 在需要检索的数据源中绑定一个变量,用来存储所有的数据。
```typescript
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. 在模板中使用过滤器,根据用户输入的关键字过滤数据源中的数据。
```html
<el-table :data="items.filter(item => item.name.includes(keyword))">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
这样,用户在输入框中输入关键字时,表格中会即时显示符合条件的数据。你也可以根据具体的需求对过滤器进行修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![tgz](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)