js css html

el-select初始化赋值后无法选值的问题

2023-01-02  本文已影响0人  扶得一人醉如苏沐晨

问题场景:ElementUI下拉框el-select赋值后无法选值的问题

问题在于el-option在v-for循环的时候,绑定的是对象数组,还是字符串数组
当for循环的是对象数组的时候是没有这个问题的,如

       options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }]
<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>

当for循环的是字符串数组的时候就有问题了,如果初始化的时候,给绑定值赋值,你会发现,下拉选择之后,框内的数据无法更改

    options: [
        "number",
        "name",
        "type",
        "manageDeptName",
        "useDeptName",
        "endUsedName",
        "registerTime",
      ],
    <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
    </el-select>

经过这个样的赋值之后,在页面选择下拉数据的时候无法选中(其实已经更改,只是页面没有实时刷新)

所以,解决办法就是使用$forceUpdate(),在el-select值改变的时候执行刷新组件

<template>
  <el-select v-model="value" 
  placeholder="请选择" @change="$forceUpdate()"> //重点
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
上一篇 下一篇

猜你喜欢

热点阅读