自定义组件树级组件与输入框过滤对应点亮，自定义父级可点不可点，修改树节点高亮样式

本文链接：https://blog.csdn.net/weixin_44583871/article/details/123253114

本文介绍了在Vue.js项目中如何创建一个自定义组件，实现树形结构组件与输入框的交互，通过输入框过滤节点并控制父级节点的可点击状态。同时，展示了如何修改树节点的高亮样式，提供了一个完整的代码示例，帮助开发者理解并应用到自己的项目中。

摘要由CSDN通过智能技术生成

项目场景：

自定义组件树级组件与输入框过滤对应点亮，自定义父级可点不可点，且点亮样式为蓝色

在这里插入图片描述

组件引用：

//父级可点选parent-true
    <treeFilterBox
            ref="mychild"
            :default-props="defaultProps"
            :tree-data="treeData"
            :current-spot="currentSpot"
            :tree-props="treeProps"
            :parent="false"
          />


import treeFilterBox from "@/views/deviceManagement/components/treeFilterBox";

  components: {
   
    treeFilterBox
  },
//初始值

//树结构
     defaultProps: {
   
        children: "children",
        label: "nodeName"
      },
//输入框过滤树结构
      treeProps: {
   
        value: "nodeId",
        children: "children",
        // currentLabels: "nodeName",
        label: "nodeName",
        expandTrigger: "hover",
        checkStrictly: false,
        emitPath: false
      },

//点亮节点
 handleNodeClick(data) {
   
      console.log("data1", data);
      //点亮的节点
      this.currentSpot = data;
      
      // this.$refs.mychild.getCurrent(this.currentSpot);
    },
//获取树数据
    getTree() {
   
      getTree().then(res => {
   
        this.treeData = [];
        if (res.code === "0") {
   
      
           this.treeData = res.data;
        //自己写方法取第一个需要点亮的节点
          this.currentSpot = this.familyTree(this.treeData, 2)[0];
//点亮默认节点
          this.$refs.mychild.getCurrent(this.currentSpot);
          this.getLists();
        }
      });
    },

自定义组件完整代码
代码里是nodeId，nodeType ，nodeName这些请自行修改

<template>
  <div
    style="width:100%;
    height: 100%;
    overflow: auto;"
  >
    <el-cascader
      v-if="!parent"
      v-model="spot"
      class="treeBox"
      clearable
      popper-class="treecascader"
      placeholder="请输入设备点位"
      :options="treeData"
      filterable
      :props="treeProps"
      @change="handleChange"
    />
    <el-cascader
      v-else
      v-model="spot"
      :options="treeData"
      class="treeBox"
      placeholder="请输入设备点位"
      filterable
      popper-class="cascaderBox tree"
      :props="{
   
        expandTrigger: 'hover',
        value: treeProps.value,
        label: treeProps.label,
        children: treeProps.children,
        checkStrictly: true,
        emitPath: false
      }"
      @change="handleChange"
    />
    &