vue3+elementplus+虚拟树el-tree-v2+多条件筛选过滤filter-method

筛选条件

<el-input
        v-model="searchForm.searchTreeValue"
        @input="searchTreeData"
        style="flex: 1; margin-right: 0.0694rem"
        placeholder="请输入要搜索的设备"
        clearable
      />
 <img
        class="refresh-img"
        src="com_refresh.png"
        alt="refresh"
        @click="refreshTree"
      />     
 <el-select
          v-model="searchForm.deviceType"
          placeholder="请选择"
          size="small"
          style="flex: 1"
          @change="searchTreeData"
        >
          <el-option
            v-for="item in data"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
       <el-select
          v-model="searchForm.deviceSource"
          placeholder="请选择"
          size="small"
          style="flex: 1"
          @change="searchTreeData"
        >
          <el-option
            v-for="item in data"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

el-tree-v2

 <el-tree-v2
          class="treev2-t"
          ref="treeRef"
          style="width: 100%"
          :height="treeHeight"
          :data="treeData"
          :filter-method="filterNode"
          :default-expanded-keys="expandedKeys"
          node-key="hightlightKey"
          :expand-on-click-node="true"
          :show-checkbox="true"
          empty-text="暂无组织数据"
        ></tree>

script-初始化

const treeData = reactive([]) // 后端接口树形数据
const treeRef = ref(null)
const searchForm = reactive({
  searchTreeValue: '',
  deviceType: '',
  deviceSource: '',
  deviceTag: '',
})
watch(
  searchForm,
  (newValue, oldValue) => {
    closeDialog()
    treeRef.value?.filter()
  },
  { immediate: true, deep: true }
)

script-过滤

/**
 * 树搜索
 */
function filterNode(value, data) {
  if (
    (!value &&
      !searchForm.deviceType &&
      !searchForm.deviceSource &&
      !searchForm.deviceTag) ||
    data.toiName == undefined ||
    data.mac == undefined ||
    data.channelCode == undefined
  )
    return true
  return checkNodeMatch(data)
}
// 检查节点是否匹配所有条件
const checkNodeMatch = (node) => {
  let idsArr = []
  if (node.infos && node.infos.length > 0) {
    cliIds = node.infos.map((item) => item.id)
  }
  const conditions = [
    {
      value: searchForm.searchTreeValue,
      match: () =>
        node.name
          ?.toLowerCase()
          .includes(searchForm.searchTreeValue.toLowerCase()) 
    },
    {
      value: searchForm.deviceType,
      match: () =>
        !searchForm.deviceType ||
        node.channelType == searchForm.deviceType,
    },
    {
      value: searchForm.deviceSource,
      match: () =>
        !searchForm.deviceSource ||
        idsArr.includes(searchForm.deviceSource),
    },
  ]

  return conditions.every((condition) => !condition.value || condition.match())
}

const treeFilterData = computed(() => {
  if (!hasSearchConditions()) {
    return treeData
  }
  return filterTree(treeData)
})
// 检查是否有搜索条件
const hasSearchConditions = () => {
  return Object.values(searchForm).some((value) => value !== '')
}

// 递归过滤树数据
const filterTree = (data) => {
  if (!data) return []

  return data.reduce((acc, node) => {
    // 创建节点副本
    const newNode = { ...node }

    // 检查节点是否匹配
    const isMatch = checkNodeMatch(newNode)

    // 处理子节点
    if (node.children?.length) {
      const filteredChildren = filterTree(node.children)
      if (filteredChildren.length) {
        newNode.children = filteredChildren
        acc.push(newNode)
        return acc
      }
    }

    // 如果当前节点匹配，添加到结果中
    if (isMatch) {
      if (!newNode.children?.length) {
        delete newNode.children
      }
      acc.push(newNode)
    }

    return acc
  }, [])
}

const searchTreeData = useDebounce(handleSearchTreeData, 300) // 300ms 的防抖延迟
// 定义你想要执行的配套函数
function handleSearchTreeData() {
  //  ？？？
  // 触发重新渲染
  treeRef.value?.setData(treeFilterData.value)
}
// 使用 useDebounce 创建一个防抖版本的函数
const refreshTree = useDebounce(handleRefreshTree, 300) // 300ms 的防抖延迟
function handleRefreshTree(){
searchForm.deviceSource = ''
  searchForm.deviceTag = ''
  searchForm.deviceType = ''
  searchForm.searchTreeValue = ''
  treeRef.value?.setCheckedKeys([], false)
}
// 防抖
export const useDebounce = (fn, delay = 300) => {
  let timer = null

  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn(...args)
    }, delay)
  }
}

原文地址：https://blog.csdn.net/qq_42568116/article/details/143689200

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！