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

<template>
  <div
    class="virtual-list"
    :style="{ height: list.length === 0 || list.length === 1 ? '600px' : '' }"
  >
    <div
      class="charts"
      v-if="list && list.length > 0"
      :style="{ height: list.length === 0 || list.length === 1 ? '600px' : '' }"
    >
      <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);
  height: 100%;
}

.virtual-list {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroller {
  height: 100%;
  overflow: hidden;

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

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