From a172a54ddd05e04a83d9f33b4c7fe4c1aa95038b Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 18 Nov 2025 14:57:11 +0800
Subject: [PATCH] feat:搜索添加选中状态
---
src/views/layerManagement/components/leftList.vue | 41 ++++++++++++++++++++++++++++++++++-------
1 files changed, 34 insertions(+), 7 deletions(-)
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index 0b52fce..99ae440 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/src/views/layerManagement/components/leftList.vue
@@ -57,8 +57,8 @@
node-key="id"
default-expand-all
:expand-on-click-node="false"
- :check-on-click-node="false"
- :filter-node-method="filterNode"
+ :check-on-click-node="false"
+
@check="handleCheck"
:props="{
label: 'name',
@@ -69,7 +69,7 @@
<template #default="{ node }">
<div class="tree-node">
<!-- 节点名称 -->
- <span class="nodeName">{{ node.label }}</span>
+ <span class="nodeName" :class="{ 'search-highlight': isNodeMatched(node.data.id) }">{{ node.label }}</span>
<!-- 操作按钮组 -->
<div class="tree-node-actions">
<el-button
@@ -117,6 +117,7 @@
dkbh: '',
patchesName: '',
});
+const matchedNodeIds = ref([]);
const loading = ref(false);
const treeData = ref([]);
const treeAllData = ref([]);
@@ -238,7 +239,7 @@
layerParams.value.fileType = 1;
} else if (props.activeName === '自定义禁飞区') {
layerParams.value.fileType = 2;
- }
+ }
emit('update:editFolder', node.data);
} else if (node.data.level === 3) {
checkedKeys.value = [];
@@ -325,12 +326,35 @@
}
function search() {
- treeRef.value?.filter(formData.value.dkbh);
+ const keyword = formData.value.dkbh.trim();
+ matchedNodeIds.value = [];
+
+ if (!keyword) return;
+
+ // 递归查找匹配的节点
+ const findMatches = (nodes) => {
+ nodes.forEach(node => {
+ if (node.name && node.name.includes(keyword)) {
+ matchedNodeIds.value.push(node.id);
+ }
+ if (node.children && node.children.length) {
+ findMatches(node.children);
+ }
+ });
+ };
+
+ findMatches(treeData.value);
}
+// 重置搜索
function reset() {
formData.value.dkbh = '';
- treeRef.value?.filter('');
+ matchedNodeIds.value = [];
}
+
+// 判断节点是否匹配搜索关键词
+const isNodeMatched = (nodeId) => {
+ return matchedNodeIds.value.includes(nodeId);
+};
function filterNode(value, data) {
if (props.activeName === '国土空间规划') {
if (!value) return data.level === 2 || data.level === 1;
@@ -411,7 +435,10 @@
display: flex;
flex-direction: column;
}
-
+.search-highlight {
+ color: #409eff !important; // 蓝色高亮，可以根据需要修改
+ font-weight: bold;
+}
.searchBox {
display: flex;
margin-top: 10px;
--
Gitblit v1.9.3