下拉搜索hook

下拉搜索 hook

el-select 搜索

传参：数组，搜索的属性名称，是否从开头搜索

import { computed, ref } from 'vue'

export default function useFilterSelect(
  data: any[] = [],
  filterName = '',
  isStart = false
) {
  const filterKeyword = ref('')
  const filterMethod = (keyword: any) => {
    filterKeyword.value = keyword
  }
  const filteredOptions = computed(() => {
    if (!filterKeyword.value) return data
    if (isStart) {
      return data.filter((item: any) =>
        item[filterName]
          .toLowerCase()
          .startsWith(filterKeyword.value.toLowerCase())
      )
    } else {
      return data.filter((item: any) =>
        item[filterName]
          .toLowerCase()
          .includes(filterKeyword.value.toLowerCase())
      )
    }
  })
  return {
    filterMethod, // 返回过滤的方法
    filteredOptions, // 返回过滤后的数据
  }
}
//  filterable :filter-method="filterMethod"

el-tree-select 数据量大时

传参：数组，搜索的属性名称，子集名称

import { computed, ref } from 'vue'
// 递归删除空的children
const cleanEmptyChildren = (arr: any[]) => {
  return arr.map(item => {
    // 创建新对象，避免修改原对象
    const newItem = { ...item }
    // 如果有children属性且不为空数组
    if (newItem.children && Array.isArray(newItem.children)) {
      if (newItem.children.length > 0) {
        // 递归处理children
        newItem.children = cleanEmptyChildren(newItem.children)
      } else {
        // 如果children是空数组，删除children属性
        delete newItem.children
      }
    }
    return newItem
  })
}

export default function useFilterTreeSelect(data: any[] = [], label = 'label', children = 'children') {
  const treeSelectsArr = ref<any[]>(cleanEmptyChildren(data))  // 数组
  const filterKeyword = ref('')  // 搜索词

  // 递归查询tree结构数据
  const filteredOptions = computed(() => {
    if (!filterKeyword.value) return treeSelectsArr.value  // 不存在则不变
    const filterTree = (nodes: any[]): any[] => {
      return nodes.filter(node => {
        const match = node[label].toLowerCase().includes(filterKeyword.value.toLowerCase())  // 是否包含
        if (node[children] && node[children].length > 0) {
          const filteredChildren: any[] = filterTree(node[children])
          node[children] = filteredChildren
          return match || filteredChildren.length > 0
        }
        return match
      })
    }
    return filterTree(JSON.parse(JSON.stringify(treeSelectsArr.value)))
  })

  // 改变搜索词
  const filterMethod = (keyword: any) => {
    filterKeyword.value = keyword
  }
  return {
    filterMethod,  // 返回过滤的方法
    filteredOptions  // 返回过滤后的数据
  }
}
//  filterable :filter-method="filterMethod"  clearable default-expand-all check-strictly