<template>
<el-select-v2
v-model="value1"
:options="options"
placeholder="Please select"
style="width: 240px; margin-right: 16px; vertical-align: middle"
multiple
clearable
/>
<el-select-v2
v-model="value2"
:options="options"
placeholder="Please select"
style="width: 240px; vertical-align: middle"
clearable
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const value1 = ref([])
const value2 = ref('')
const options = Array.from({ length: 1000 }).map((_, idx) => ({
value: `Option ${idx + 1}`,
label: `${initials[idx % 10]}${idx}`,
}))
</script>
这是Element plus 官网的虚拟化选择器给出的代码
刚开始看到map的时候很奇怪,这是什么意思,百度了下,在此记录下
map()方法是针对数组的,返回的结果也是一个数组,
新数组中的元素为原始数组中的每个元素调用函数处理后得到的值
该方法有一个参数,参数是一个函数,函数中有3个参数
我自己用到的话是只用到了一个参数 item,当前元素的值
data为接口返回的数据,即为原数组,动态赋值给这个下拉列表