el-tree 懒加载树

el-tree 懒加载树

• 添加自定义图标
• 指定叶子节点
• 懒加载

---

<template>
  <div>
    <el-tree
      class="filter-tree"
      :data="treeData"
      :props="defaultProps"
      ref="tree"
      lazy
      :load="loadTree"
      :expand-on-click-node="true"
      @node-click="nodeClick"
    >
      <span slot-scope="{ node, data }" class="span__">
        <img
          class="sxtImg"
          v-if="data.channelId && data.isOnline == 'true'"
          src="../../../../../assets/image/sxt1.png"
          alt=""
          title="设备在线"
        />
        <img
          class="sxtImg"
          v-if="data.channelId && data.isOnline != 'true'"
          src="../../../../../assets/image/sxt2.png"
          alt=""
          title="设备离线"
        />
        <span
          :class="[
            data.channelId && data.isOnline != 'true' ? 'offline' : 'online',
          ]"
          >{{ node.label }}</span
        >
      </span>
    </el-tree>
  </div>
</template>


<script>
import { spTreeList } from "@/utils/api.js";
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: (data) => {
          return data.channelId != null;  // ※ 指定哪种情况是最后一级(否则懒加载的树叶子节点前会有展开箭头,需要点一下才消失)
        },
      },
      treeData: [],
    };
  },
  mounted() {
  },
  methods: {
    nodeClick(data, node, comp) {
      if (data.channelId && data.isOnline != "true") {
        this.$message.error("当前设备离线!");
        return;
      }

      this.$emit("click", data, node.isLeaf);
    },

    // 懒加载加载方法，首次加载树的时候会被触发
    loadTree(node, resolve) {
      spTreeList({ orgCode: "" }).then((res) => {
        // this.rootNode = node;
        // this.rootResolve = resolve;
        let rootMainResolve = resolve;
        let treedata = [];

        if (node.level == 0) {
          treedata.push(res.data);
          return resolve(...treedata);
        }

        // 加载子级
        // if (node.data.isParent && node.data.parentId != "") {
        //   this.getChild(node.data, node.data.parentId, rootMainResolve);
        // } else {
        //   return resolve([]); // 防止不停转圈
        // }
        // 加载子级
        if (node.data.channelId) {
          return resolve([]); // 防止不停转圈
        } else {
          this.getChild(node.data, node.data.parentId, rootMainResolve);
        }
      });
    },
    getChild(data, type, resolve) {
      spTreeList({
        orgCode: data.id,
      }).then((res) => {
        return resolve(res.data);
      });
    },
    // 重新渲染树的根节点
    resetNode() {
      spTreeList({ orgCode: "" }).then((res) => {
        this.treedata = res.data;
      });
    },
  },
};
</script>



<style lang="scss" scoped>

  /deep/.el-tree-node__content {
    background: transparent;
  }

  /deep/ .el-tree__empty-block {
    background: transparent;
  }
  /deep/.el-tree {
    background: transparent;
  }
  /deep/.el-tree-node__label {
    color: #fff;
  }
  /deep/.el-tree-node__content:hover,
  /deep/.el-upload-list__item:hover {
    background: linear-gradient(
      90deg,
      rgba(74, 204, 255, 0.52),
      rgba(69, 122, 230, 0)
    );
    position: relative;
  }
  /deep/.el-tree-node__content:hover::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: #4accff;
    width: 4px;
    height: 100%;
  }
  /deep/ .is-current > .el-tree-node__content {
    position: relative;
    background: linear-gradient(
      90deg,
      rgba(74, 204, 255, 0.52),
      rgba(69, 122, 230, 0)
    );

    /deep/ .is-current > .el-tree-node__content::before {
      content: "";
      position: absolute;
      left: 0px;
      top: 0;
      background: #4accff;
      width: 4px;
      height: 100%;
    }
  }




.online {
  color: #fff;
}
.offline {
  color: rgba(255, 255, 255, 0.6);
}

.sxtImg {
  vertical-align: middle;
  margin-right: 5px;
}
</style>