111

components/hc-tree/hc-tree.vue

@@ -5,6 +5,7 @@
                           :check="isCheck"
                           :strictly="isStrictly"
                           :radio="isRadio"
+                          :currentKey="currentNodeKey"
                           @nodeLoad="treeLoadTap"
                           @nodeTap="treeNodeTap"
             />
@@ -54,6 +55,10 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    currentKey: {
+        type: String,
+        default: '',
+    },
 })
 
 //节点数据
@@ -63,6 +68,7 @@ const nodeData = ref([]);
 const isCheck = ref(props.check)
 const isRadio = ref(props.radio)
 const isStrictly = ref(props.strictly)
+const currentNodeKey = ref(props.currentKey)
 
 //事件
 const emit = defineEmits(['load', 'nodeTap'])
@@ -153,6 +159,7 @@ const ifCheckData = (data, item) => {
 
 //树节点被点击
 const treeNodeTap = (item) => {
+    currentNodeKey.value = item.key
     emit('nodeTap', item)
 }
 

components/hc-tree/style.scss

@@ -59,7 +59,12 @@
             }
             .expand-icon + .label,
             .tree-check + .label {
-                margin-left: 2px;
+                margin-left: 4rpx;
+            }
+            &.current-node-key {
+                background: #f4f4f4;
+                border-radius: 5rpx;
+                color: #007aff;
             }
         }
         :deep(.children-bar) {

components/hc-tree/tree-node.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="hc-tree-node" :class="[nodeItem.level > 1 ? 'pl': '']">
-        <view class="content-bar" @click="nodeTap(nodeItem)">
+        <view class="content-bar" :class="currentNodeKey===nodeItem.key?'current-node-key':''" @click="nodeTap(nodeItem)">
             <view class="expand-icon" @click.stop="expandTap(nodeItem)" :class="nodeItem.isExpand?'is-expanded':''">
                 <text class="i-ri-arrow-right-s-fill" v-if="!nodeItem.isLeaf"/>
             </view>
@@ -23,6 +23,7 @@
                                   :check="isCheck"
                                   :strictly="isStrictly"
                                   :radio="isRadio"
+                                  :currentKey="currentNodeKey"
                                   @nodeLoad="getLazyLoad"
                                   @nodeTap="nodeTaps"
                     />
@@ -54,6 +55,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    currentKey: {
+        type: String,
+        default: '',
+    },
 })
 
 //事件
@@ -66,6 +71,7 @@ const nodeItem = ref(props.item)
 const isCheck = ref(props.check)
 const isRadio = ref(props.radio)
 const isStrictly = ref(props.strictly)
+const currentNodeKey = ref(props.currentKey)
 
 //监听
 watch(() => [
@@ -74,6 +80,13 @@ watch(() => [
     nodeItem.value = item
 }, {deep: true})
 
+//监听
+watch(() => [
+    props.currentKey
+], ([val]) => {
+    currentNodeKey.value = val
+})
+
 //节点被点击
 const nodeTap = (item) => {
     expandTap(item)
@@ -109,6 +122,7 @@ const setBrotherExpand = (item, nodes) => {
 
 //子节点被点击
 const nodeTaps = (item) => {
+    currentNodeKey.value = item.key
     emit('nodeTap', item)
 }