tree

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>新电脑用起来太爽了，加油加油！</h1>
    <Tree
      ref="tree"
      :data="baseData"
      show-checkbox
      @on-check-change="changeBox"
    ></Tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseData: [
        {
          id: 1001,
          parentId: 1,
          name: "AA",
        },
        {
          id: 1002,
          parentId: 1001,
          name: "BB",
        },
        {
          id: 1003,
          parentId: 1001,
          name: "CC",
        },
        {
          id: 1004,
          parentId: 1003,
          name: "DD",
        },
        {
          id: 1005,
          parentId: 1003,
          name: "EE",
        },
        {
          id: 1006,
          parentId: 1002,
          name: "FF",
        },
        {
          id: 1007,
          parentId: 1002,
          name: "GG",
        },
        {
          id: 1008,
          parentId: 1004,
          name: "HH",
        },
        {
          id: 1009,
          parentId: 1005,
          name: "II",
        },
      ],
      baseData1: [
        {
          title: "parent 1",
          key: "parent 1",
          checked: false,
          expand: true,
          children: [
            {
              title: "parent 1-1",
              key: "parent 1-1",
              checked: false,
              expand: true,
              children: [
                {
                  title: "leaf 1-1-1",
                  key: "leaf 1-1-1",
                  checked: false,
                  expand: true,
                },
                {
                  title: "leaf 1-1-2",
                  key: "leaf 1-1-2",
                  checked: false,
                  expand: true,
                },
              ],
            },
            {
              title: "parent 1-2",
              key: "parent 1-2",
              checked: false,
              expand: true,
              children: [
                {
                  title: "leaf 1-2-1",
                  key: "leaf 1-2-1",
                  checked: false,
                  expand: true,
                },
                {
                  title: "leaf 1-2-2",
                  key: "leaf 1-2-2",
                  checked: false,
                  expand: true,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.baseData = this.baseData.map((x) => {
      return {
        title: x.name,
        expand: true,
        key: x.id,
        checked: false,
        parentId: x.parentId,
        children: [],
      };
    });
    this.baseData = this.recursiveToTree(this.baseData);
  },
  methods: {
    recursiveToTree(data) {
      function loop(key) {
        let arr = [];
        data.forEach((item) => {
          if (item.parentId === key) {
            console.log(item);
            item.children = loop(item.key);
            arr.push(item);
          }
        });
        return arr;
      }
      return loop(1);
    },
    changeBox(val) {
      // for (let i = 0; i < 3; i++) {
      //   let base = this.deepChange(this.baseData);
      //   this.baseData = JSON.parse(JSON.stringify(base));
      // }
      console.log(val);
      let sut = this.checkedTree(val);
      console.log(sut, "sut");
    },
    deepChange(result) {
      for (let i = 0; i < result.length; i++) {
        if (result[i].children && result[i].children.length) {
          let checkedTrue = result[i].children.filter((item) => item.checked);
          let checkedFalse = result[i].children.filter(
            (item) => !item.checked && !item.indeterminate
          );
          if (checkedFalse.length === result[i].children.length) {
            result[i].checked = false;
            result[i].indeterminate = false;
          } else if (checkedTrue.length === result[i].children.length) {
            result[i].indeterminate = false;
            result[i].checked = true;
          } else {
            result[i].checked = false;
            result[i].indeterminate = true;
          }
          this.deepChange(result[i].children);
        }
      }
      return result;
    },
    checkedTree(data) {
      function loop(data) {
        let arr = [];
        data.forEach((item) => {
          if (item.children.length) {
            arr.push(item);
            loop(item.children);
          } else {
            arr.push(item);
          }
        });
        return arr;
      }
      return loop(data);
    },
  },
};
</script>

<style></style>