1，有一个表格

 <el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>

绑定了一些测试数据

tableData: [{date: "2026-05-02",name: "墨智",address: "天运星 1518 弄"},{date: "2099-05-04",name: "张虎",address: "赵国恒岳派 1517 弄"},{date: "3065-05-01",name: "王林",address: "赵国王家村 1519 弄"},{date: "3065-05-03",name: "李慕婉",address: "楚国云天宗 1516 弄"}]

当前效果如下

2，如果此表格数据量过大，那么就需要一个搜索功能，首先在表格上方加一个输入框

<el-input v-model="searchQuery" placeholder="请输入项目名称" class="mb-20"></el-input>

顺便加一点样式

.mb-20 {margin-bottom: 10px;width: 300px;
}

3，js数据data里给输入框绑定数据

data() {return {searchQuery: '',}
}

4，js计算方法里添加过滤

computed: {filteredData() {const searchQuery = this.searchQuery.toLowerCase();if (searchQuery == undefined || searchQuery == "") {return this.tableData;}return this.tableData.filter((row) => {return row.name.includes(searchQuery);});}}

5，修改表格绑定的数据源

 <el-table:data="filteredData"borderstyle="width: 100%">

来看成品动图，很简单，在线运行代码网站