Picker tree recursion used by vue uniapp company

<template>
  <view class="">
    <my-tree
      :tree-data="treeData"
      @xuanzhong="xuanzhong"
      @bindPickerChange="bindPickerChange"
    ></my-tree>

    <!-- <button @click="dianji">dianji</button> -->
  </view>
</template>

<script>
import myTree from "./component/myTree.vue";
export default {
  components: {
    myTree,
  },
  data() {
    return {
      treeData: [
        {
          code: "51",
          title: "Please select city and state----",
          show: true,
          // arr: [
          // { name: "Chengdu City", code: "5101" },
          // { name: "Neijiang City", code: "5110" },
          // ],
          children: [
            {
              code: "5101",
              name: "Chengdu City",
              title: "Please select district and county 1",
              show: false,

              // arr: [
              // { name: "Wuhou District", code: "120011" },
              // { name: "Pidu District", code: "130011" },
              // ],

              children: [
                {
                  show: false,

                  code: "510101",
                  name: "Wuhou District",
                  title: "Please select a street",
                },
                {
                  show: false,

                  code: "510102",
                  name: "Pidu District",
                  title: "Please select a street",
                },
              ],
            },
            {
              code: "5110",
              name: "Neijiang City",
              title: "Please select district and county 2",
              show: false,
              children: [
                {
                  code: "511001",
                  name: "Zizhong County",
                },
                {
                  code: "511002",
                  name: "Longchang City",
                },
              ],
            },
          ],
        },
      ],
      aaa: "",
    };
  },
  onLoad() {
    const testJson = require("./component/data.json");
    console.log(testJson, 11111);
    this.treeData = testJson;
  },
  methods: {
    dianji() {
      console.log(this.treeData, 11111);
      console.log(JSON.stringify(this.treeData));
    },
    xuanzhong(item, index) {
      // if (item.children) {
      // console.log("Clicked 2", item, index);
      // } else {
      // console.log("clicked", item, index);
      // }
    },
    bindPickerChange(e) {
      this.aaa = e;
      console.log("jieguo", this.aaa);

      // console.log("picker sends selection changes, carrying value", e.detail.value);
      // console.log("!!!!!!!!");
    },
  },
};
</script>

<template>
  <div class="tree-item">
    <div v-for="(item, index) in treeData" :key="item.code">
      <!-- @click="nodeClick(item)" -->
      <div
        class="item-title xyflex"
        v-show="item.show"
        @click="xuanzhong(item, index)"
      >
        <picker
          @change="bindPickerChange($event, item, index)"
          :range="item.arr"
          range-key="name"
        >
          <!--v-if="item.show" -->
          <span>{<!-- -->{ item.title }}{<!-- -->{ item.choose }}</span>
        </picker>
      </div>
      <div v-if="item.children & amp; & amp; item.children.length" class="item-childen">
        <!-- @node-click="$emit('node-click', $event)" -->
        <my-tree
          :treeData="item.children"
          @xuanzhong="
            $emit('xuanzhong', item.children[treeitemindex], treeitemindex)
          "
          @bindPickerChange="$emit('bindPickerChange', $event)"
        ></my-tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myTree",
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      old: [],

      index: 0,
      title: "picker",
      jieguo: "",

      expandedKeys: [], // An array composed of the currently expanded node IDs
      treeitem: "",
      treeitemindex: "",
    };
  },
  methods: {
    del(data) {
      console.log(data, 777777);
      if (data) {
        for (var j = 0; j < data.length; j + + ) {
          console.log(data[j], 11111);

          data[j].show = false; //Add title attribute
          data[j].choose = ""; //Add title attribute
          data[j].chooseid = ""; //Add title attribute

          if (data[j].children) {
            if (data[j].children.length > 0) {
              this.del(data[j].children);
            }
          }
        }
      }

      return data;
    },
    xuanzhong(item, index) {
      // console.log(666666, 11111);
      var arr = [];
      item.children.forEach((i, index) => {
        var aaa = {
          name: i.name,
          code: i.code,
        };
        arr.push(aaa);
      });
      item.arr = arr;
      this.$forceUpdate();

      this.treeitem = item;
      this.treeitemindex = index;

      console.log("Clicked 3", item, index, 9999999);
      this.$emit("xuanzhong", item, index);
    },

    bindPickerChange(e, item, index) {
      if (item & amp; & amp; item.children & amp; & amp; item.children[index].children) {
        this.del(item.children);
      }
      var index = index; //index The entire selected Please select the city and state - choose chooseid children code show
      var arrindex = e.detail.value; //arrindex selects the subscript of picker

      item.choose = item.arr[arrindex].name;
      item.chooseid = item.arr[arrindex].code;

      if (item.children) {
        item.children.forEach((element, index2) => {
          if (element.code == item.chooseid) {
            element.show = true;
            // console.log(55555, 11111);
          } else {
            element.show = false;
            element.choose = "";
            element.chooseid = "";
          }
        });
      }
      this.jieguo = {
        code: item.arr[arrindex].code,
        name: item.arr[arrindex].name,
      };

      this.$forceUpdate();
      this.$emit("bindPickerChange", this.jieguo);
      return;
      console.log(item.children, 55555555555555); //Tianjin City, Hebei Province, Shanxi Province
      if (item.children & amp; & amp; item.children[index].children) {
        this.del(item.children);
      }
      console.log("bindPickerChange", e.detail.value, item, index);

      item.choose = item.arr[arrindex].name;
      item.chooseid = item.arr[arrindex].code;
      console.log(this.treeitem.chooseid, 11111);

      if (item.children) {
        item.children.forEach((element, index2) => {
          if (element.code == item.chooseid) {
            element.show = true;
            // console.log(55555, 11111);
          } else {
            element.show = false;
            element.choose = "";
            element.chooseid = "";
          }
        });
      }

      this.$forceUpdate();
      this.$emit("bindPickerChange", e);
    },
    nodeClick(item) {
      // return;
      this.$emit("node-click", item);
      if (item.children & amp; & amp; item.children.length) {
        let index = this.expandedKeys.indexOf(item.code);
        if (index > -1) {
          // If the current node id exists in the array, delete it
          this.expandedKeys.splice(index, 1);
        } else {
          // If the current node id does not exist in the array, add it
          this.expandedKeys.push(item.code);
        }

        // console.log(this.expandedKeys, "expandedKeys");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-item {
  cursor: pointer;
  .item-title {
    padding: 4px 8px;
     & amp;:hover {
      background: #eee;
    }
  }
  .item-childen {
    padding-left: 20px;
  }
}
</style>