在vue一個頁面同時用多個zTree?

在vue中使用兩個ztree的使用, 當(dāng)點(diǎn)擊第一個ztree的時候, 彈出詳情, 里面又有一個ztree, 但是里面的ztree顯示不出來, 數(shù)據(jù)可以打印出來, 也能初始化, 在網(wǎng)上說可以根據(jù)ID來區(qū)分, 但是自己操作方法行不通, 有沒有大佬碰到這種問題?

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>信息項(xiàng)</li>
                        <li>樣地號</li>
                        <li>樣方號</li>
                        <li>調(diào)查人員</li>
                        <li>日期</li>
                        <li>當(dāng)前亞樣方</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,
          // 第一個數(shù)據(jù)
          setting: {
            view: {
              showLine: false
            },
            data: {
              simpleData: {
                enable: true
              }
            },
            callback: {
              onClick: this.zTreeOnClick
            }
          },
          nodeData: [
            {
              name: "父節(jié)點(diǎn)1",
              children: [{ name: "子節(jié)點(diǎn)1" }, { name: "子節(jié)點(diǎn)2" }]
            }
          ],
          // 第二個數(shù)據(jù)
          settingss: {
            view: {
              showLine: false
            },
            data: {
              simpleData: {
                enable: true
              }
            },
            callback: {
              onClick: this.zTreeInfo
            }
          },
          nodeDatass: [
            {
              name: "父節(jié)點(diǎn)1",
              children: [{ name: "子節(jié)點(diǎn)1" }, { name: "子節(jié)點(diǎn)2" }]
            }
          ]
    }
  }


  mounted() {
    this.zTreeList();
  },
  methods: {
    // 第一個ztree數(shù)據(jù)初始化
    zTreeList() {
      let treeObj = $.fn.zTree.init(
        $("#uploadtree"),
        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($("#check_info_tree"), this.settingss, this.nodeDatass);
      console.log(
        "初始化",
        $.fn.zTree.init($("#check_info_tree"), this.settingss, this.nodeDatass)
      );
    },
  }  

頁面展示及打印數(shù)據(jù), 有數(shù)據(jù)卻展示不出來