vue uniapp 公司用的 picker 树形递归

<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: "请选择市州----",
          show: true,
          // arr: [
          //   { name: "成都市", code: "5101" },
          //   { name: "内江市", code: "5110" },
          // ],
          children: [
            {
              code: "5101",
              name: "成都市",
              title: "请选择区县1",
              show: false,

              // arr: [
              //   { name: "武侯区", code: "120011" },
              //   { name: "郫都区", code: "130011" },
              // ],

              children: [
                {
                  show: false,

                  code: "510101",
                  name: "武侯区",
                  title: "请选择街道",
                },
                {
                  show: false,

                  code: "510102",
                  name: "郫都区",
                  title: "请选择街道",
                },
              ],
            },
            {
              code: "5110",
              name: "内江市",
              title: "请选择区县2",
              show: false,
              children: [
                {
                  code: "511001",
                  name: "资中县",
                },
                {
                  code: "511002",
                  name: "隆昌市",
                },
              ],
            },
          ],
        },
      ],
      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("点击的2", item, index);
      // } else {
      //   console.log("点击的", item, index);
      // }
    },
    bindPickerChange(e) {
      this.aaa = e;
      console.log("jieguo", this.aaa);

      // console.log("picker发送选择改变，携带值为", 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 && 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: [], // 当前展开的节点id组成的数组
      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; //添加title属性
          data[j].choose = ""; //添加title属性
          data[j].chooseid = ""; //添加title属性

          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("点击的3", item, index, 9999999);
      this.$emit("xuanzhong", item, index);
    },

    bindPickerChange(e, item, index) {
      if (item && item.children && item.children[index].children) {
        this.del(item.children);
      }
      var index = index; //index 选中的这一整个  请选择市州- choose chooseid children code  show
      var arrindex = e.detail.value; //arrindex  选中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); //天津市河北省山西省
      if (item.children && 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 && item.children.length) {
        let index = this.expandedKeys.indexOf(item.code);
        if (index > -1) {
          // 如果当前节点id存在数组中，则删除
          this.expandedKeys.splice(index, 1);
        } else {
          // 如果当前节点id不存在数组中，则添加
          this.expandedKeys.push(item.code);
        }

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

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