改造el-tree实现单击选中双击取消选中

el-tree动态设置选中高亮，再次点击取消选中并清空样式

实现效果

(1) 设置高亮

<el-tree
            :data="treeData"
            :props="defaultProps"
            node-key="id"
            highlight-current
            @node-click="handleNodeClick"
            :expand-on-click-node="false"
          >
</el-tree>

(2) 设置当再次点击时，取消当前选中id，动态设置样式

当选中一级目录时，不需要设置父级样式，只需要清空即可！！！

    // 点击分类时
    handleNodeClick(data, node, ele) {
      if (!data.children && data.pid !== null) {
        //这里存一下是子级的元素，防止eleui点击父级的之后找不到上一次的子级。
        this.chooseEle = ele.$el;
        // 移除其他子级的is-current这个class
        const eles = document.querySelectorAll(
          ".el-tree-node__children .el-tree-node.is-focusable"
        );
        for (let i = 0; i < eles.length; i++) {
          eles[i].classList.remove("is-current");
        }
        // 移除当前选中的父级样式
        if (this.chooseFather && this.chooseFather.classList) {
          this.chooseFather.classList.remove("is-current");
        }
        // 给当前点击的这个子级添加is-current这个class
        // this.chooseEle.classList.add("is-current");
        if (this.query.twoLevelId === data.id) {
          this.query.oneLevelId = "";
          this.query.twoLevelId = "";
          this.chooseEle = {};
          //this.clearStyle(0);
        } else {
          this.query.oneLevelId = data.pid;
          this.query.twoLevelId = data.id;
          this.chooseEle.classList.add("is-current");
         // this.clearStyle(1);
        }
      } else {
        // 一级分类
        // 移除所有选中子目录样式
        const eles = document.querySelectorAll(
          ".el-tree-node__children .el-tree-node.is-focusable"
        );
        for (let i = 0; i < eles.length; i++) {
          eles[i].classList.remove("is-current");
        }
        if (this.chooseFather && this.chooseFather.classList) {
          this.chooseFather.classList.remove("is-current");
          this.chooseFather = ele.$el;
        } else {
          this.chooseFather = ele.$el;
        }
        if (this.query.oneLevelId === data.id&&this.query.twoLevelId==="") {
          this.query.oneLevelId = "";
        } else {
          this.query.twoLevelId = "";
          this.query.oneLevelId = data.id;
          this.chooseFather.classList.add("is-current");
        }
      }
      this.query.pageNum = 1;
      this.getList();
    },
    // 清空/设置树形选中样式
    /**clearStyle(num) {
      let array = document.querySelectorAll(".is-current");
      if (array && array.length > 0) {
        for (let i = 0; i < array.length; i++) {
          const element = array[i];
          const content = element.querySelectorAll(".el-tree-node__content");
          content[0].style.background = num === 0 ? "none" : "#f0f7ff";
        }
      }
    }*/