vue+elementui表格点击搜索
时间: 2023-11-01 21:56:56 浏览: 48
你可以使用 Element UI 中的表格组件和输入框组件来实现表格点击搜索的功能。具体步骤如下:
1. 在表格上方添加一个输入框组件,用户输入搜索关键字;
2. 监听输入框的输入事件,将输入的关键字作为参数传递给后台接口调用;
3. 后台接口返回符合搜索条件的数据列表;
4. 将返回的数据列表渲染到表格中。
下面是一个简单的示例代码:
```html
<template>
<div>
<el-input v-model="keyword" placeholder="请输入搜索关键字" @input="handleSearch"></el-input>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
tableData: []
}
},
methods: {
handleSearch() {
// 调用后台接口,传递搜索关键字参数
// 此处省略后台接口调用过程
// 假设返回的数据格式为 { name: string, age: number, address: string }[]
this.tableData = [
{ name: '张三', age: 20, address: '北京市海淀区' },
{ name: '李四', age: 25, address: '上海市浦东新区' },
{ name: '王五', age: 30, address: '广州市天河区' }
]
}
}
}
</script>
```
在上面的示例代码中,我们使用了 Element UI 中的输入框组件和表格组件来实现了表格点击搜索的功能。当用户在输入框中输入关键字时,会触发 handleSearch 方法,该方法会调用后台接口查询数据,并将查询结果渲染到表格中。