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>
相关推荐
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅1 天前
JavaScript 作用域
前端·javascript
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
云枫晖1 天前
JS核心知识-事件循环
前端·javascript
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown