请给我一个实例,使用el-table,el-button,el-input组件,做出一个对el-table精确搜索的功能
时间: 2023-06-04 17:05:03 浏览: 132
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
好的,我可以为您提供一个示例代码,使用el-table、el-button、el-input组件,实现对el-table表格进行精确搜索的功能。以下是示例代码:
<template>
<div>
<el-input v-model="keyword" placeholder="请输入搜索关键词"></el-input>
<el-button type="primary" @click="search">搜索</el-button>
<el-table :data="tableData" border>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
tableData: [
{name: '张三', age: 18},
{name: '李四', age: 25},
{name: '王五', age: 30},
]
}
},
methods: {
search() {
if (this.keyword === '') {
return;
}
this.tableData = this.tableData.filter((item) => {
return item.name === this.keyword;
})
}
}
}
</script>
在上述代码中,el-input组件用于输入关键词,el-button组件用于触发搜索事件。在search方法中,使用filter方法对表格数据进行筛选,筛选条件为name属性与输入的关键词相等。这样就可以实现对el-table表格进行精确搜索的功能。
阅读全文