懒加载树选中节点

最新推荐文章于 2022-10-12 17:30:37 发布

陈y_d

最新推荐文章于 2022-10-12 17:30:37 发布

阅读量239

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/Cwd_wade/article/details/107968244

版权

<template>
  <div class="login">
    <el-tree
      :props="props"
      ref="tree"
      :load="loadNode"
      @check-change="checkChange"
      @check="check"
      @current-change="currentChange"
      node-key="id"
      lazy
      show-checkbox
    ></el-tree>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
      },
      keys: ["421512512", "2451", "333333", "333555"],
    };
  },
  methods: {
    check(data, nodes) {
      console.log("check==>", data.name, nodes);
    },
    checkChange(data, isSelected, childSelected) {
      console.log("checkChange===>", data.name, isSelected, childSelected);
    },
    currentChange(data, node) {},
    loadNode(node, resolve) {
      let _this = this;
      setTimeout(() => {
        console.log("after:", _this.$refs.tree.getCheckedKeys(), _this.keys);
        if (_this.$refs.tree.getCheckedKeys().length == 0) {
          _this.$refs.tree.setCheckedKeys([]);
        } else {
          _this.$refs.tree.setCheckedKeys(_this.$refs.tree.getCheckedKeys());
        }
      }, 3000);
      if (node.level === 0) {
        return resolve([{ id: "111", name: "region" }]);
      }
      if (node.level === 1) {
        let that = this;
        setTimeout(() => {
          const data = [
            {
              id: "222",
              name: "leaf",
              leaf: true,
            },
            {
              id: "333",
              name: "zone",
            },
            {
              id: "444",
              name: "zone1",
            },
            {
              id: "555",
              name: "zone2",
            },
          ];

          resolve(data);
        }, 500);
        setTimeout(() => {
          that.$refs.tree.setCheckedKeys(that.keys);
        }, 1000);
      }
      if (node.level > 1 && node.data.id == "444") {
        let that = this;
        resolve([
          {
            id: "421512512",
            name: "zoneChild",
          },
          {
            id: "2451",
            name: "zoneChild",
          },
          {
            id: "444333",
            name: "zoneChild",
          },
          {
            id: "444555",
            name: "zoneChild",
          },
        ]);
        setTimeout(() => {
          that.$refs.tree.setCheckedKeys(that.keys);
        }, 1000);
      } else if (node.level > 1 && node.data.id == "333") {
        let that = this;
        resolve([
          {
            id: "333333",
            name: "zoneChild213",
          },
          {
            id: "333555",
            name: "zoneChild21",
          },
          {
            id: "441241",
            name: "zoneChild21",
          },
          {
            id: "333152412",
            name: "zoneChild21",
          },
        ]);
        setTimeout(() => {
          that.$refs.tree.setCheckedKeys(that.keys);
        }, 1000);
      } else {
        return resolve([]);
      }
    },
  },
};
</script>