我们经常会用到搜索，可以使用计算属性：
代码语言：javascript复制 <!-- 表格搜索框 -->
<el-input
v-model="searchContent"
placeholder="搜索1"
size="medium"
style="width:200px;float:right;margin-bottom:10px;"
></el-input> <el-table :data="filterData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table> //搜索数据
computed: {
filterData: function() {
var input = this.searchContent && this.searchContent.toLowerCase();
var items = this.tableData;
var items1;
if (input) {
items1 = items.filter(function(item) {
return Object.keys(item).some(function(key1) {
return String(item[key1])
.toLowerCase()
.match(input);
});
});
} else {
items1 = items;
}
return items1;
}
}但是如果有多个table都要搜索，最好使用方法，因为可以传参数（tableData 表格数据；searchContent:输入框内容）
代码语言：javascript复制 <el-table :data="filterData2(tableData,searchContent)" style="width: 100%" v-if="isShowTable2">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table> filterData2(data,searchContent) {
//var input = this.searchContent && this.searchContent.toLowerCase();
var input = searchContent.toLowerCase()
var items = data;
var items1;
if (input) {
items1 = items.filter(function(item) {
return Object.keys(item).some(function(key1) {
return String(item[key1])
.toLowerCase()
.match(input);
});
});
} else {
items1 = items;
}
return items1;
},总结：单个表格搜索可以使用计算属性，多个表格通过调用同一个过滤函数，这样避免代码冗余。
