the use of two ztree in vue. When you click on the first ztree, the details will pop up. There is another ztree, in it, but the ztree in it cannot be displayed. The data can be printed out and initialized. It is said on the Internet that it can be distinguished according to ID, but its own operation method does not work. Has any boss encountered this problem?
html
<el-col :span="5">
<div class="bottom">
<!-- ztree -->
<ul class="ztree" id="uploadtree"></ul>
</div>
<div class="info" v-if="isZtreeShow">
<i class="el-icon-close fr" @click="closeZtreeShow"></i>
<h4></h4>
<el-row>
<el-col :span="10">
<div class="left">
<!-- ztree -->
<ul class="ztree" id="check_info_tree"></ul>
</div>
</el-col>
<el-col :span="14">
<div class="right clearfix">
<ul class="fl">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="fl">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>/</li>
</ul>
</div>
</el-col>
</el-row>
</div>
</el-col>js
import ztree from "ztree"
data() {
return {
//
isZtreeShow: false,
//
setting: {
view: {
showLine: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: this.zTreeOnClick
}
},
nodeData: [
{
name: "1",
children: [{ name: "1" }, { name: "2" }]
}
],
//
settingss: {
view: {
showLine: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: this.zTreeInfo
}
},
nodeDatass: [
{
name: "1",
children: [{ name: "1" }, { name: "2" }]
}
]
}
}
mounted() {
this.zTreeList();
},
methods: {
// ztree
zTreeList() {
let treeObj = $.fn.zTree.init(
$("-sharpuploadtree"),
this.setting,
this.nodeData
);
treeObj.expandAll(true);
},
zTreeOnClick() {
this.isZtreeShow = true;
this.zTreeDetails();
},
// ztree
zTreeDetails() {
console.log("settingss", this.settingss);
console.log("nodeDatass", this.nodeDatass);
$.fn.zTree.init($("-sharpcheck_info_tree"), this.settingss, this.nodeDatass);
console.log(
"",
$.fn.zTree.init($("-sharpcheck_info_tree"), this.settingss, this.nodeDatass)
);
},
} display and print data on the page, but not on the page with data
