element筛选 ajax,element ui使用筛选功能实现前端本地表格搜索

之前自己模拟过一个，但由于是自己写的，比较复杂，有兴趣的同学可以看看这篇文章，element多选表格批量删除本地数据，不走接口，最近发现element官网有一个叫筛选器的东西，由于文档关于筛选器介绍的不太明白，通过研究，筛选器是可以实现本地搜索的，下面上代码。

vue-test2

信息管理

@selection-change="handleSelectionChange">

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)

}

}

})

大家直接粘贴走运行一下就好了，为了大家方便，案例都是通过引入cdn的形式，如果打不开报错的话就是cdn不稳定(经常抽风)，更换下能用的cdn链接即可。