el-tree 懶加載樹文章來源地址http://www.zghlxwxcb.cn/news/detail-660507.html

• 添加自定義圖標(biāo)
• 指定葉子節(jié)點(diǎn)
• 懶加載

<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="設(shè)備在線"
        />
        <img
          class="sxtImg"
          v-if="data.channelId && data.isOnline != 'true'"
          src="../../../../../assets/image/sxt2.png"
          alt=""
          title="設(shè)備離線"
        />
        <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;  // ※ 指定哪種情況是最后一級(jí)(否則懶加載的樹葉子節(jié)點(diǎn)前會(huì)有展開箭頭,需要點(diǎn)一下才消失)
        },
      },
      treeData: [],
    };
  },
  mounted() {
  },
  methods: {
    nodeClick(data, node, comp) {
      if (data.channelId && data.isOnline != "true") {
        this.$message.error("當(dāng)前設(shè)備離線!");
        return;
      }

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

    // 懶加載加載方法，首次加載樹的時(shí)候會(huì)被觸發(fā)
    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);
        }

        // 加載子級(jí)
        // if (node.data.isParent && node.data.parentId != "") {
        //   this.getChild(node.data, node.data.parentId, rootMainResolve);
        // } else {
        //   return resolve([]); // 防止不停轉(zhuǎn)圈
        // }
        // 加載子級(jí)
        if (node.data.channelId) {
          return resolve([]); // 防止不停轉(zhuǎn)圈
        } else {
          this.getChild(node.data, node.data.parentId, rootMainResolve);
        }
      });
    },
    getChild(data, type, resolve) {
      spTreeList({
        orgCode: data.id,
      }).then((res) => {
        return resolve(res.data);
      });
    },
    // 重新渲染樹的根節(jié)點(diǎn)
    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>

到了這里，關(guān)于el-tree 懶加載樹的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！