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

筛选条件

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

el-tree-v2

 <el-tree-v2class="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 truereturn 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 = filteredChildrenacc.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 = nullreturn (...args) => {clearTimeout(timer)timer = setTimeout(() => {fn(...args)}, delay)}
}