列表样式

ZZJ

2022-07-15 b200eed05d5bff2e12a45331bdc062f4b00bebf7

 src/components/giantTree/index.vue

@@ -18,7 +18,9 @@
      @onExpand="itemExpand"
      @onCollapse="itemCollapse"
      @onShowPic="showCameraPic"
      :search="search"
    />
    <div class="empty" v-if="!node.length">暂无摄像机数据,请添加摄像机!</div>
    <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div>
    <div
      class="dialog-box"
@@ -85,6 +87,10 @@
      default: function () {
        return {};
      },
    },
    search: {
      type: Boolean,
      default: false,
    },
  },
  data() {
@@ -287,7 +293,9 @@
      this.showDialog = true;
    },
    itemClick(evt, treeId, treeNode) {
      console.log("click");
      this.TreeDataPool.selectedNode = treeNode;
      this.TreeDataPool.activeNode = treeNode;
      this.TreeDataPool.treeType = this.treeName;

      // 多选
@@ -313,8 +321,11 @@
    //   this.TreeDataPool.updateZTreeCheckNodes([treeNode]);
    // },
    itemCheck(evt, treeId, treeNode) {
      this.TreeDataPool.selectedNode = treeNode;
      if (treeNode) {
        this.TreeDataPool.selectedNode = treeNode;
      }
      this.TreeDataPool.treeType = this.treeName;

      // 多选
      // this.ztreeObj.checkNode(treeNode, true, false, false);
      let checkedNodes = this.ztreeObj.getCheckedNodes(true);
@@ -325,6 +336,7 @@

      // 保存一份数据
      this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes();
      this.$emit("itemChecked", treeNode);
    },
    //展开
    itemExpand(e, id, node) {
@@ -402,10 +414,14 @@
}
.tree-menu {
  // max-width: 350px;
  min-height: 92px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 4px;
}
.empty {
  line-height: 76px;
}
.tree-menu::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/