vue实现筛选数组对象的功能

首先需要定义一个存储筛选结果的数组，还有筛选内容的变量。此处用的是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
      })
    })
  }
};