vue-element怎么给select下拉框赋值？

灰太狼 2022-12-13 11:26 368阅读 0赞

看文档真的是一件非常快乐的事情，看别人写的代码，再跟自己写的代码一对比，立刻会发现有很多不同的地方，也可以学到很多新技能，从最简单的阅读学习起来，今天看的是select下拉框相关的。

资料相关

星星指数：star:55k  
中文文档：[https://element.eleme.cn/\#/zh-CN/component/checkbox][https_element.eleme.cn_zh-CN_component_checkbox]  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]

--------------------

select选择器文档指路：[https://element.eleme.cn/\#/zh-CN/component/select][https_element.eleme.cn_zh-CN_component_select]

基础用法：

1：当返回值是对象数组的时候

仔细观察，可以看到以上的例子中，包括在文档中所有涉及到数据渲染的地方，返回值全部都是这种形式，对象数组

[{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
     }]

select下拉框赋值，当返回值是对象数组的时候  
渲染的时候只需要用v-for循环遍历数组，取出数组中的对象的值就行了

<template>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default {
        data() {
          return {
            options: [{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }],
            value: ''
          }
        }
      }
    </script>

![format_png][]

2：当返回值是字符串数组的时候  
当返回值options的数据格式是这样的时候,v-for循环options数组，是key,value直接等于item即可。

options: [
              '黄金',
              '白银',
              '铂金',
              '钻石',
            ],

<template>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item"
          :value="item">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default {
        data() {
          return {
            options: [
              '黄金',
              '白银',
              '铂金',
              '钻石',
            ],
            value: ''
          }
        }
      }
    </script>

![format_png 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70][]

[https_element.eleme.cn_zh-CN_component_checkbox]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN%2Fcomponent%2Fcheckbox
[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[https_element.eleme.cn_zh-CN_component_select]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN%2Fcomponent%2Fselect
[format_png]: /images/20221123/c2e8bab8ed0b4b01bcb0ed2d96fc1079.png
[format_png 1]: /images/20221123/8250ac4aa70c407b8b9cbb68598ed5b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70]: /images/20221123/b490241c6812405f872363406b88b375.png