el-tree 懒加载并在一级节点后加图标移入图标显示收藏并提示_el-tree树组件的懒加载叶子节点添加图标-CSDN博客

本文链接：https://blog.csdn.net/qq_44716001/article/details/131126952

该代码示例展示了如何在Vue应用中使用el-tree组件进行异步懒加载，处理节点点击事件以及自定义节点内容。loadNode方法用于加载子节点数据，handleNodeClick方法处理节点被点击时的逻辑，同时提供了节点图标的点击处理函数。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-scrollbar style="height: 100%">
      <el-tree
        node-key="id"
        ref="tree"
        highlight-current
        :props="props"
        :load="loadNode"
        lazy
        :render-content="renderContent"
        @node-click="handleNodeClick"
      >
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componyId: "",
      props: {
        label: "name",
        children: [],
        isLeaf: "leaf", // 否为叶子节点
      },
    };
  },
  methods: {
    handleIconClick(node, event) {
      console.log("处理图标点击事件!", node);
      // 阻止默认行为，避免收起节点
      event.stopPropagation();
      // 处理图标点击事件
    },
    // 异步树叶子节点懒加载逻辑
    loadNode(node, resolve) {
      // 一级节点处理
      if (node.level == 0) {
        this.requestTree(resolve);
      }
      // 其余节点处理
      if (node.level >= 1) {
        console.log(node.level, "触发");
        this.getIndex(node, resolve);
      }
    },
    // 异步加载叶子节点数据函数
    getIndex(node, resolve) {
      // var param = {
      //   provinceId: node.data.id
      // };
      // var url = "/base/inter";
      // this.$ajax
      //   .post(url, param)
      //   .then(out => {
      var datas = [
        {
          id: "31",
          name: "阶段1",
          flag: "2",
        },
        {
          id: "32",
          name: "文件夹1",
          flag: "2",
        },
        {
          id: "33",
          name: "阶段2",
          flag: "2",
        },
      ];
      datas.forEach((value) => {
        if (value.flag === "2") {
          value.leaf = true; // true 代表是末节点 接口要返回表示是不是末节点
        } else {
          value.leaf = false;
        }
      });
      let data = datas;
      console.log(data, "数据");
      resolve(data);
      // })
      // .catch(error => {});
    },
    // 首次加载一级节点数据函数
    requestTree(resolve) {
      var datas = [
        {
          id: "21",
          name: "2023苏源大道项目",
          flag: "1",
        },
        {
          id: "22",
          name: "2022北京大道项目",
          flag: "1",
        },
        {
          id: "23",
          name: "2022南京大道项目",
          flag: "1",
        },
      ];
      datas.forEach((value) => {
        value.leaf = false;
      });
      let data = datas;
      resolve(data);
    },
    // 树-转换
    handleNodeClick(value) {
      if (value.flag == "2") {
        this.componyId = value.id;
        // 此处调接口渲染数据
      }
    },
    renderContent(h, { node, data, store }) {
      // if (data.flag == '2') {
      //   return ( < span > < i
      //     style = "color: #409EFF;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>);
      //   } else if (data.flag == '1'){
      //     return ( < span > < i
      //       style = "color: #FFB427;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>);
      //     }
      if (node.level === 1) {
        return h("span", [
          h("span", { class: "node-text" }, node.label),
          h(
            "el-tooltip",
            {
              attrs: { effect: "dark", content: "收藏" },
              style: { marginLeft: "5px" },
            },
            [
              h("i", {
                class: "el-icon-star-on",
                style: {
                  cursor: "pointer",
                },
                on: {
                  click: (event) => this.handleIconClick(data, event),
                },
              }),
            ]
          ),
        ]);
      } else {
        return h("span", { class: "node-text" }, node.label);
      }
    },
  },
};
</script>

<style lang="scss">
.node-text {
  margin-right: 5px;
}
.el-icon-star-on {
  color: #409eff;
}
</style>