<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>