el-tree 懒加载树

el-tree 懒加载树

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

html 复制代码
<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>
相关推荐
demi_meng44 分钟前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科1 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20161 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
90后的晨仔3 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
EndingCoder4 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔4 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔4 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀4 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
liangshanbo12156 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
Never_Satisfied6 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript