el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点

<template>
  <div class="datamanage">
    <el-card class="left">
      <el-row>
        <p>资料分类形式</p>
      </el-row>
      <div class="sortform">
        <div
          class="item"
          style="margin-right: 7px"
          @click="changesortform('ywjk')"
          :class="sortform === 'ywjk' ? 'active1' : ''"
        >
          <img :src="require('@/assets/datamanage/源文件库.png')" alt="" />
          <span>源文件库</span>
        </div>
        <div
          class="item"
          style="margin-left: 7px"
          @click="changesortform('tjk')"
          :class="sortform === 'tjk' ? 'active2' : ''"
        >
          <img :src="require('@/assets/datamanage/统计库.png')" alt="" />
          <span>统计库</span>
        </div>
      </div>
      <el-divider></el-divider>
      <el-tree
        class="tree_container"
        :data="treedata"
        default-expand-all
        node-key="id"
        ref="tree"
        :current-node-key="currennode.id"
        highlight-current
        check-strictly
        :props="defaultProps"
        :check-on-click-node="false"
        @node-click="nodeClick"
      >
        <span class="custom-tree-node" slot-scope="{ data }">
          <span
            style="
              color: #555f6f;
              font-size: 14px;
              font-family: MicrosoftYaHei;
              font-weight: 500;
              display: flex;
              align-items: center;
            "
          >
            <i
              v-if="data.icon"
              :class="data.icon"
              class="iconfont"
              style="font-size: 16px; color: #86909c; margin-right: 10px"
            ></i>
            <span
              v-else
              style="
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #e5e6eb;
                margin-right: 10px;
              "
            ></span
            >{{ data.label }}
          </span>
        </span>
      </el-tree>
    </el-card>
    <el-card class="right"> {{ currennode.label }} </el-card>
  </div>
</template>
<script>
import { datamanage } from "@/config/datamanage";
export default {
  components: {},
  data() {
    return {
      sortform: "ywjk", //资料分类形式
      currennode: {
        id: 7,
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {},
  mounted() {},
  computed: {
    treedata() {
      return datamanage[this.sortform];
    },
  },
  watch: {
    treedata: {
      deep: true,
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.currennode = this.findNode(this.treedata, (node) => {
            return !node.children;
          });
          this.$refs.tree.setCurrentKey(this.currennode.id);
        });
      },
    },
  },
  methods: {
    //改变资料分类形式
    changesortform(val) {
      this.sortform = val;
    },
    //点击节点时间
    nodeClick(e, node) {
      this.$nextTick(() => {
        if (!e.children) {
          this.currennode = e;
        }
        this.$refs.tree.setCurrentKey(this.currennode.id);
        console.log(this.currennode);
      });
    },
    //查找树节点无子节点的叶节点
    findNode(tree, func) {
      for (const node of tree) {
        if (func(node)) return node;
        if (node.children) {
          const res = this.findNode(node.children, func);
          if (res) return res;
        }
      }
      return null;
    },
  },
};
</script>

    .tree_container {
      ::v-deep.el-tree > .el-tree-node:after {
        border-top: none;
      }
      ::v-deep .el-tree-node {
        position: relative;
        padding-left: 16px;
      }
      //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
      ::v-deep .el-tree-node__expand-icon.is-leaf {
        display: none;
      }
      ::v-deep .el-tree-node__children {
        padding-left: 16px;
      }
      ::v-deep .el-tree-node :last-child:before {
        height: 38px;
      }
      ::v-deep .el-tree > .el-tree-node:before {
        border-left: none;
      }
      ::v-deep .el-tree > .el-tree-node:after {
        border-top: none;
      }
      ::v-deep .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
      }
      ::v-deep .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
      }
      ::v-deep .el-tree-node:before {
        border-left: 1px solid #e5e6eb;
        bottom: 0px;
        height: 100%;
        top: -22px;
        width: 1px;
      }
      ::v-deep.el-tree-node:after {
        border-top: 1px solid #e5e6eb;
        height: 10px;
        top: 10px;
        width: 14px;
        transform: rotate(20deg);
      }
      ::v-deep .el-tree-node__content {
        padding-left: 10px !important;
      }
    ::v-deep.el-tree-node__expand-icon {
      position: absolute;
      right: 2%;
    }
    ::v-deep .el-tree-node__content {
      margin: 10px 0;
    }
    }