当前位置:   article > 正文

map方法_el-select-v2

el-select-v2
  1. <template>
  2. <el-select-v2
  3. v-model="value1"
  4. :options="options"
  5. placeholder="Please select"
  6. style="width: 240px; margin-right: 16px; vertical-align: middle"
  7. multiple
  8. clearable
  9. />
  10. <el-select-v2
  11. v-model="value2"
  12. :options="options"
  13. placeholder="Please select"
  14. style="width: 240px; vertical-align: middle"
  15. clearable
  16. />
  17. </template>
  18. <script lang="ts" setup>
  19. import { ref } from 'vue'
  20. const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  21. const value1 = ref([])
  22. const value2 = ref('')
  23. const options = Array.from({ length: 1000 }).map((_, idx) => ({
  24. value: `Option ${idx + 1}`,
  25. label: `${initials[idx % 10]}${idx}`,
  26. }))
  27. </script>

这是Element plus 官网的虚拟化选择器给出的代码

刚开始看到map的时候很奇怪,这是什么意思,百度了下,在此记录下

map()方法是针对数组的,返回的结果也是一个数组,

新数组中的元素为原始数组中的每个元素调用函数处理后得到的值

该方法有一个参数,参数是一个函数,函数中有3个参数

我自己用到的话是只用到了一个参数   item,当前元素的值  

 data为接口返回的数据,即为原数组,动态赋值给这个下拉列表

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/101126
推荐阅读