调整

src/components/sbsLazyTree.vue

+<template>
+  <div v-loading='!loading' element-loading-text="数据量较大请耐心等待" ref="lazyTree" class="full" style="position: relative;">
+    <!-- 拖动 的div-->
+    <div ref="move" class="move">
+
+    </div>
+    <div v-if="treeTitle" class="treeTitle" style="font-weight: 600;">
+      {{treeTitle}}
+    </div>
+    <div v-if="loading" class="treeBody">
+      <el-tree @node-collapse='handleNodeCollapse' :highlight-current='true' :load="loadNode" lazy :props="props"
+        :rootid='rootid' style="width: 100%;" @node-click="handleNodeClick" ref="tree">
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+  /*
+  组件是该项目单独定制设备树组件
+  除了选中暴露选中事件，其他的props不需要传递
+  部分prop将会失效
+  */
+  export default {
+    props: {
+      /* 当没url时判定静态数据 */
+      staticData: {
+        default: () => []
+      },
+      /* cid id  */
+      cid: {
+        default: 'sbxxTreeId'
+      },
+      /* pid 父节点id  */
+      pid: {
+        default: 'pid'
+      },
+      /* 根 */
+      roodid: {
+        default: 'root'
+      },
+      /* 树结构数据查询 */
+      url: {
+        default: false
+      },
+      /* 查询参数 */
+      queryParams: {
+        default: () => {
+          return {}
+        }
+      },
+      /* 根节点id */
+      rootid: {
+        default: 'root'
+      },
+      /* el-tree props */
+      props: {
+        default: () => {
+          return {
+            label: 'name',
+            isLeaf: 'isLeaf'
+          }
+        },
+      },
+      /* 标题不填会隐藏 */
+      treeTitle: {
+
+      },
+    },
+    mounted() {
+      this.$post('sbgl/usbxx/queryroot',{
+        Pid:'root'
+      }).then(res => {
+        if (res.success) {
+          this.rootArray = res.data.records || []
+          this.loading = true
+          this.$nextTick(() => {
+          	if (this.$refs.tree.$children && this.$refs.tree.$children[0] && this.$refs
+          		.tree.$children[0].$el) {
+          		this.$refs.tree.$children[0].$el.click()
+          	}
+          })
+        }
+      })
+
+      /* 配置move 信息 */
+      var resizableDiv = this.$refs.lazyTree.parentNode;
+      var resizableDiv2 = this.$refs.lazyTree;
+
+      const nextSibling = this.$refs.lazyTree.parentNode.nextSibling;
+
+
+      const oldWidth = parseFloat(resizableDiv.style.width)
+      const oldWidth2 = parseFloat($(nextSibling).width())
+
+      var resizer = this.$refs.move;
+      var isResizing = false;
+      var lastX = 0;
+
+      resizer.addEventListener('mousedown', function(e) {
+        isResizing = true;
+        lastX = e.clientX;
+      });
+
+      window.addEventListener('mousemove', function(e) {
+        if (!isResizing) return;
+        var dx = e.clientX - lastX;
+        var newWidth = resizableDiv.offsetWidth + dx;
+        resizableDiv.style.width = newWidth + 'px';
+        resizableDiv2.style.width = newWidth + 'px';
+        lastX = e.clientX;
+
+        try {
+          $(nextSibling).width(oldWidth2 - (newWidth - oldWidth))
+        } catch (e) {
+
+        }
+
+      });
+
+      window.addEventListener('mouseup', function() {
+        isResizing = false;
+      });
+
+      /* try catch 抓去兄弟节点来改变宽度 */
+
+    },
+    data() {
+      return {
+        rootArray: [],
+        loading: false,
+        lastNode: null,
+        lastResolve: null,
+        nodeMap: {
+
+        },
+        resolveMap: {
+
+        }
+      };
+    },
+    methods: {
+      handleNodeCollapse(data, node, instance) {
+
+        if (data.id === 'root') {
+          this.$nextTick(() => {
+            node.expanded = true
+          });
+        }
+      },
+      handleNodeClick(data) {
+        this.$emit('selected', data)
+      },
+      loadLastNode() {
+        this.loadNode(this.lastNode, this.lastResolve)
+      },
+      loadAllNode() {
+        Object.keys(this.nodeMap).forEach(key => {
+          this.loadNode(this.nodeMap[key], this.resolveMap[key])
+        })
+
+      },
+      loadNode(node, resolve) {
+        if (node.level === 0) {
+          return resolve(this.rootArray);
+        } else {
+          const data = node.data
+          this.$post('sbgl/usbxx/queryroot', {
+            "pid": data.id
+          }).then(res => {
+            if (res.success && node.level < 1) {
+              resolve(res.data.records)
+            } else {
+              res.data.records.forEach(item => {
+                item.isLeaf = true
+              })
+              resolve(res.data.records)
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .full {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column
+  }
+
+  .treeTitle {
+    height: 50px;
+    width: 100%;
+    border-bottom: 5px solid #eee;
+    text-align: center;
+    line-height: 50px;
+    font-size: 14px;
+  }
+
+  .treeBody {
+    padding-right: 5px;
+    flex: 1;
+    width: 100%;
+    overflow-y: scroll;
+
+  }
+
+  .treeBody::-webkit-scrollbar {
+
+    background-color: #000;
+
+    width: 0px;
+  }
+
+  .move {
+    height: 100%;
+    width: 5px;
+    cursor: e-resize;
+    position: absolute;
+    right: -5px;
+    top: 0;
+    z-index: 999;
+  }
+</style>

src/main.js

@@ -17,6 +17,7 @@ import plugins from './plugins' // plugins
 import {App} from 'common'
 /* 注册common */
 import framework from "common"
+import sbsLazyTree from "@/components/sbsLazyTree.vue"
 
 /* 全局注册自身组件 */
 
@@ -84,6 +85,8 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('SbsLazyTree', sbsLazyTree)
+
 
 
 Vue.use(framework)

src/views/sbxxgl/sbxx/index.vue

 <template>
   <div class="full flex  hastree" style="flex-direction: row;height: 140vh;border-top: 5px solid #eee;">
     <div class="min_full" style="width: 380px;border: 0px;height: 140vh;">
-      <LazyTree treeTitle="设备信息树" ref="lazyTree" :props="{
+<!--     <LazyTree treeTitle="设备信息树" ref="lazyTree" :props="{
   					  label: 'name',
   					  isLeaf: 'isLeaf'
-  					}" cid='id' @selected='selectedTree' url='sbgl/usbxx/queryroot' />
+  					}" cid='id' @selected='selectedTree' url='sbgl/usbxx/queryroot' /> -->
+
+     <SbsLazyTree  @selected='selectedTree'  />
+
+
+
     </div>
     <div class="min_full" style="width: calc(100% - 380px);border-top: 0px;height: 140vh;">
       <div style="height:477px;width: 100%;">