el-select的value绑定的是 item 的对象时，所有选项都变高亮问题解决方案。

爱吃西瓜z

已于 2023-06-02 11:52:03 修改

阅读量1.7k

点赞数 1

文章标签： vue elementui

于 2023-06-02 11:50:54 首次发布

本文链接：https://blog.csdn.net/weixin_45782529/article/details/131003917

版权

element中el-select的value绑定的是 item 的对象时，所有选项都变高亮问题

问题描述

el-select的value绑定的是 item 的对象时，所有选项都变高亮

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

在这里插入图片描述

解决办法：

当select选项option需要绑定值为对象时，需要给select绑定一个value-key属性，绑定方式为value-key='option的key对应值‘，且key必须为唯一属性值。

      <el-select
        v-model="modelValue"
        @change="onChange"
        placeholder="请选择"
        value-key="templateCode"
      >
        <el-option
          v-for="item in options"
          :key="item.templateCode"
          :label="item.templateName"
          :value="item"
        >
        </el-option>
      </el-select>
    </el-form-item>