虚拟列表

[maya1900]

<template>
  <el-dialog v-model="isShow" width="500px">
    <el-scrollbar wrap-class="list-wrapper" @scroll="handleScroll($event)">
      <div class="virtual-list" ref="container" :style="{height: containerHeight}">
        <div :style="{height: totalHeight + 'px', paddingTop: paddingTop + 'px'}" ref="container1">
          <div v-for="(item,index) in data.items" :key="`list-${index}`" class="virtual-list-item" :style="{height: `${itemHeight}px`}">
            <el-radio v-model="data.buyIns" :label="item.id">{{item.name}}</el-radio>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script setup lang="jsx">
import {computed, onMounted, reactive, ref, watchEffect} from 'vue'

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})
const data = reactive({
  buyIns: '',
  items: []
})

const container = ref(null)
const paddingTop = ref(0)
const itemHeight = ref(30)
const visibleCount = ref(10)
const scrollTop = ref(0)
watchEffect(() => {
  if (container.value) {
    updateVisibleDate()
  }
})
const totalHeight = computed(() => props.items.length * itemHeight.value)
const containerHeight = computed(() => visibleCount.value * itemHeight.value)
function updateVisibleDate() {
  const start = Math.floor(scrollTop.value / itemHeight.value)
  const end = start + visibleCount.value
  data.items = props.items.slice(start, end)
  paddingTop.value = start * itemHeight.value
}
const handleScroll = (event) => {
  scrollTop.value = event.scrollTop
  // updateVisibleDate()
}

const isShow = ref(false)
const open = () => {
  isShow.value = true
}
defineExpose({
  open
})
</script>
<style lang="scss" scoped>
:deep(.list-wrapper) {
  height: 300px;
  width: 100%;
}
.virtual-list {
  overflow-y: auto;
  &-item {
    height: 30px;
  }
}

</style>