performance-test/src/components/virtual_list/index.vue

<template>
  <div class="virtual-list" :style="{ height: list.length === 0 || list.length === 1 ? '452px' : '' }">
    <div class="charts" v-if="list && list.length > 0"
      :style="{ height: list.length === 0 || list.length === 1 ? '452px' : '' }">
      <!-- <RecycleScroller class="scroller" :items="diagramRelationsDatas" :item-size="452" key-field="fieldEngineCode"
            v-slot="{ item: itemChart }">
            <TwoDMarkersChart :key="itemChart.fieldEngineCode" :ref="itemChart.fieldEngineCode"
              :fileAddr="itemChart.fileAddr">
            </TwoDMarkersChart>
          </RecycleScroller> -->
      <!-- <template v-for="(itemChart, indChart) in diagramRelationsDatas">
          
          </template> -->
      <RecycleScroller class="scroller" :items="list" :item-size="itemSize" :key-field="keyField"
        v-slot="{ item, index }">
        <slot :item="item" :index="index"></slot>
      </RecycleScroller>
    </div>
    <el-empty description="暂无分析记录" v-else></el-empty>
  </div>
</template>

<script type="text/javascript">
//import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: "VirtualList",
  components: {},
  props: {
    list: {
      type: Array,
      default: () => []
    },
    keyField: {
      type: String,
      default: 'id'
    },
    itemSize: {
      type: Number,
      default: 300
    }
  },
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
.charts {
  height: calc(100% - 150px);
}

.virtual-list {
  height: 100%;
}

.scroller {
  height: 100%;

  /* 隐藏垂直滚动条 */
  &::-webkit-scrollbar {
    width: 0;
  }

  /* 隐藏水平滚动条 */
  &::-webkit-scrollbar {
    height: 0;
  }
}
</style>