可以使用watch
监听,也可以使用@input
下面以watch
监听为例
单个输入框搜索
// filter 是你输入框绑定的值
// this.tableData 表格原始数据 this.tableList 深拷贝的一份表格数据
// list 通过正则模糊搜索出来的数据
watch: {
filter (val) {
if (val) {
let reg = new RegExp(val)
let list = this.tableList.filter(item => reg.test(item.name))
this.tableData= list
} else {
this.tableData= this.tableList
}
}
}
多条件搜索,也支持单个的
比如下面数据:
tableData: [
{name: '张三', sex: '男'},
{name: '李四', sex: '男'},
{name: '李丽', sex: '女'},
]
filter: {
name: '',
sex: ''
}
// this.copyList是深拷贝的tableData
filter: {
handler () {
const realList = this.copyList.filter(order => {
return Object.keys(this.filter).reduce((flag, item) => {
if (!flag) {
return false
} else {
return this.filter[item].trim() ? String(order[item]).indexOf(this.filter[item]) !== -1 : true
}
}, true)
})
this.tableData= realList
},
deep: true
}