vue-splitpane 的使用

vue文件：

<template>


  <div class="components-container">
    <split-pane :min-percent='20' :default-percent='20' split="vertical">
      <template slot="paneL">
        <a-card>
         
        </a-card>
      </template>
      <template slot="paneR">
        <a-card>
          
        </a-card>
      </template>
    </split-pane>
  </div>
</template>

<script>
  import splitPane from 'vue-splitpane'
  import { getAction, postAction } from '@/api/manage'
  import moment from 'moment'
  import { getDictItemsFromCache } from '@/api/api'
  import AFormModelItem from 'ant-design-vue/es/form-model/FormItem'

  export default {
    name: 'ExamMonitor',
    components: {
      AFormModelItem,
      splitPane
    },
    data() {
      return {
        
       
      }
    },
    created() {
      
    },
    methods: {
     }
  }
</script>

<style scoped>
  .components-container {
    position: relative;
    height: 100vh;
  }
</style>

需使用div 将 split控件包起来，设置class 为components-container 才能正常显示