vue实现筛选数组对象的功能
首先需要定义一个存储筛选结果的数组,还有筛选内容的变量。此处用的是typescriptconst resolveArr = ref<any>([])const searchValue = ref<string>('');定义筛选的方法,假设我们要筛选的数据源为dataSource数组对象// 假设数据源dataSource = [{name: 'aa',detail: 'd
·
首先需要定义一个存储筛选结果的数组,还有筛选内容的变量。此处用的是typescript
const resolveArr = ref<any>([])
const searchValue = ref<string>('');
定义筛选的方法,假设我们要筛选的数据源为dataSource数组对象
// 假设数据源
dataSource = [
{
name: 'aa',
detail: 'detaila',
children: {
obj: 'cc'
}
},
{
name: 'bb',
detail: 'detailb',
children: {
obj: 'dd'
}
},
]
const onSearch = () => {
resolveArr.value = dataSource
const search = searchValue.value // 此处为搜索框的内容
if (search === '') {
// 当搜索框内容为空,取回数据源
return resolveArr.value // 取回数据源处理方法,需要自己定义,即刷新表格
} else {
// 筛选数据重新渲染,此处的dataDeal为表格的数据源
resolveArr.value = resolveArr.value.filter(function (item) {
const searchField = {
// 选择搜索的字段,此处对应数组对象的字段,可以多个筛选,以下仅供参考
name: item.name,
// detail: item.detail,
// 如果想筛选数组对象的对象 children: item.children.obj
}
// 返回处理后的结果
return Object.keys(searchField).some(function (key) {
return String(item[key]).toLowerCase().indexOf(search) > -1
// 如果想筛选数组对象的对象 return String(item.children[key]).toLowerCase().indexOf(search) > -1
})
})
}
};
更多推荐
已为社区贡献11条内容
所有评论(0)