ElementUI的下拉select组件,设置选中的value为对象

  Vue
  ElementUI
  知识
0
0
0
字数:620
发布于: 2024-06-18 13:43:58
原创声明:文章所有权为创作者【原创】所有,未经许可,不得转载!
目录
未发现目录

ElementUI的下拉select组件,当想让选中的value为对象时,选中时选中文字会错乱,此时需要设置el-select的属性value-key="id",或者其它唯一标识的属性键

如:

<el-select
  v-model="scene"
  filterable
  class="filter-item search-item"
  placeholder="请选择场景"
  style="width: 560px"
  value-key="id"
  @change="changeImportantScene"
>
  <el-option-group
    v-for="(group, idx) in calcScenes"
    :key="idx"
    :label="group.name"
  >
    <el-option
      v-for="item in group.options"
      :key="item.id"
      :label="item.name"
      :value="item"
    >
      {{ item.name }} ({{ item.startTime }} ~ {{ item.endTime }})
    </el-option>
  </el-option-group>
</el-select>

其中scene为一个对象

目录
未发现目录