用elementui写查询列表
时间: 2023-11-02 17:08:58 浏览: 27
可以使用 Element UI 的 Table 组件来实现查询列表,具体步骤如下:
1. 引入 Table 组件:
```javascript
import { Table, TableColumn } from 'element-ui';
```
2. 在模板中使用 Table 组件,同时设置相应的属性:
```html
<template>
<div>
<el-input v-model="searchText" placeholder="请输入关键字"></el-input>
<el-button type="primary" @click="search">搜索</el-button>
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="性别" prop="gender"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
</div>
</template>
```
其中,`:data` 属性绑定表格数据,`<el-table-column>` 表示每一列的列头,`prop` 属性指定每列对应的数据字段。
3. 在组件的 `data` 中定义表格数据和搜索关键字:
```javascript
data() {
return {
tableData: [
{ name: '张三', gender: '男', age: 20 },
{ name: '李四', gender: '女', age: 25 },
{ name: '王五', gender: '男', age: 30 },
],
searchText: '',
};
},
```
4. 在组件中定义搜索方法:
```javascript
methods: {
search() {
// 根据搜索关键字过滤表格数据
this.tableData = this.tableData.filter(item => {
return item.name.includes(this.searchText) ||
item.gender.includes(this.searchText) ||
item.age.toString().includes(this.searchText);
});
},
},
```
这样,就可以使用 Element UI 的 Table 组件实现一个简单的查询列表。