赞
踩
- <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为接口返回的数据,即为原数组,动态赋值给这个下拉列表
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。