rt-sim-training-client/src/views/scriptManage/index.vue

<template>
  <div class="app-wrapper">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <div v-show="treeShow" class="list" :style="{width: widthLeft+'px'}">
        <script-tree ref="scriptTree" :height="height" />
      </div>
      <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
      <transition>
        <router-view @refresh="refresh"/>
      </transition>
    </el-scrollbar>
  </div>
</template>
<script>
    import ScriptTree from './category/tree';
    import drapLeft from '@/views/components/drapLeft/index';
    import WindowResizeHandler from '@/mixin/WindowResizeHandler';
    export default {
        name: 'Script',
        components: {
            ScriptTree,
            drapLeft
        },
        mixins: [WindowResizeHandler],
        data() {
            return {
                height: 0,
                treeShow: true,
                widthLeft: 450
            };
        },
        methods: {
            resizeHandler() {
                this.height = this._clientHeight - 50;
            },
            drapWidth(width) {
                this.widthLeft = Number(width);
            },
            refresh(data) {
                this.$refs.scriptTree.refresh(data);
            }
        },
        
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .list {
    float: left;
  }
</style>