el-select下拉选项的数据源分别是数组或对象时v-for遍历的用法

在使用element ui 中的 el-select选择器组件时，通常我们会使用v-for遍历数据作为选择器的下拉选项赋值，通常遍历的数据为数组，但有时后端返回我们的数据是对象的话也是可以用来充当下拉选项的数据源的。element 官网中的例子是遍历的数组：如下<el-select v-model="value" placeholder="请选择"><el-optionv-for

LewisRoc

10093人浏览 · 2022-01-29 11:31:12

LewisRoc · 2022-01-29 11:31:12 发布

在使用element ui 中的 el-select选择器组件时，通常我们会使用v-for遍历数据作为选择器的
下拉选项赋值，通常遍历的数据为数组，但有时后端返回我们的数据是对象的话也是可以用来
充当下拉选项的数据源的。
element 官网中的例子是遍历的数组：如下

<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>

其中数据源options的数据结构为：

options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }],

但是这个地方如果后端返回的数据是对象的话也是可以直接遍历用的，只不过语法稍有不同
例如后端返回了如下格式的数据：

options: { 457:"越南盾",458:"澳元",428:"印度卢比",472:"金锭",183:"美元",426:"日元", }

此时对应标签中的语法应为：

<el-form-item prop="accountNO">
    <el-select v-model="ruleForm.accountNO" placeholder="币种">
        <el-option v-for="(value, k) in options" :label="value" :key="k" :value="k"></el-option>
    </el-select>
</el-form-item>

这里value就是options对象中的值，如越南盾、日元等
k是options对象中键也叫key 如457、458等
这里关键就是v-for循环遍历数组和遍历对象时的语法使用

v-for遍历数组时：
let Array = [ {lable: ‘宝马’, value: ‘选项1’}, {lable: ‘奔驰’, value: ‘选项2’} ]
v-for ="(item, index) in Array"
这里边item为数组中的每一个对象如 item.lable为宝马和奔驰
index为索引值
index为可选参数

v-for遍历对象时：
let Object = { 123: ‘苹果’, 124: ‘香蕉’, 125: ‘橘子’}
v-for="(value, key, index) in Object"
这里边value就是对象中的值如苹果
key就是对象中的键或key如 123
index就是对象中的索引值
key和index为可选参数