之前自己模拟过一个，但由于是自己写的，比较复杂，有兴趣的同学可以看看这篇文章，element 前端实现表格的本地增删改查，最近发现element官网有一个叫筛选器的东西，由于文档关于筛选器介绍的不太明白，通过研究，筛选器是可以实现本地搜索的，下面上代码。
<!DOCTYPE html>
<html>
<head>
<title>vue-test2</title>
<!-- 引入样式 -->
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.css" rel="stylesheet">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.js"></script>
</head>
<body>
<div id="app">
<h2>信息管理</h2>
<el-form :inline="true">
<el-form-item label="搜索">
<el-input v-model.trim="search" placeholder="输入姓名"></el-input>
<el-input v-model.trim="age" placeholder="输入年龄"></el-input>
</el-form-item>
<!-- <el-button type="primary" icon="el-icon-search" @click="handlesearch"></el-button> -->
</el-form>
<template>
<el-table ref="multipleTable" :data="handlesearch(tableData)" :row-key="getRowKey" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" :reserve-selection="true" width="55">
</el-table-column>
<el-table-column type="index" label="序号" width="60" >
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="age" label="年龄">
</el-table-column>
</el-table>
</template>
</div>
<script type="text/javascript">
<!-- 过滤器 -->
var vm = new Vue({
el: "#app",
data: {
name: "",
age: "",
search: "",
tableData: [{
name: "donlex1",
age: "18",
stime: new Date()
},
{
name: "donlex2",
age: "19",
stime: new Date()
}
]
},
methods: {
getRowKey (row) {
return row.age
},
handlesearch: function() { //第30行调用了该方法
return this.tableData.filter(item => {
if (item.name.includes(this.search) && item.age.includes(this.age)) {
// 字符串索引有关键字值,返回true
return item
}
})
},
// 搜索后不影响选中效果 分页换页也可以使用此方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(val)
}
}
})
</script>
</body>
</html>
效果展示：
