el-tree 树取消高亮

花归去2024-12-03 14:51

html 复制代码

 <el-tree
          accordion
          ref="treeRef"
          :data="treedata"
          class="treeRef"
          :current-node-key="currentnode"
          :props="defaultProps"
          highlight-current
          node-key="id"
          :default-expanded-keys="[3, 31, 311]"
          @node-click="handleNodeClick"
        >
          <template #default="{ node }">
            <img
              style="margin-right: 5px"
              :src="treeimgComputed(node.data)"
              alt=""
            />
            <p>{{ node.label }}</p>
          </template>
        </el-tree>

javascript 复制代码

const currentnode: any = ref(null);
const treeRef = ref();
const defaultProps = {
  children: "children",
  label: "label",
};
watch(currentnode, (val) => {
  treeRef.value.setCurrentKey(val);
});
const handleNodeClick = (data: any) => {
  // console.log("打印树：", data);
  currentnode.value = data.id;
  
};

主要代码就是取消高亮把currentnode赋值为null；和监听ref数据

javascript 复制代码

currentnode.value = null;

watch(currentnode, (val) => {
  treeRef.value.setCurrentKey(val);
});

const handleNodeClick = (data: any) => {
  // console.log("打印树：", data);
  currentnode.value = data.id;
   
};