Element UI下拉列表el-option中的key、value、label含义

最新推荐文章于 2025-03-13 16:42:59 发布

victor-维克特

最新推荐文章于 2025-03-13 16:42:59 发布

阅读量1.7w

点赞数 32

分类专栏：前端框架vue 文章标签： ui javascript vue.js

本文链接：https://blog.csdn.net/qinqinde123/article/details/121198084

版权

前端框架vue 专栏收录该内容

47 篇文章

订阅专栏

本文详细解析了在Vue.js中使用ElementUI组件库的下拉选择器el-select及其子组件el-option时，key、value和label属性的含义。key用于唯一标识每个选项，value是选中项传递给v-model的值，label则是展示给用户的文字内容。了解这些属性有助于更好地构建和维护前端表单组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element UI下拉列表el-option中的key、value、label含义

<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="用户姓名" prop="userId">
        <el-select v-model='queryParams.userId' style="" class="selectClass">
          <el-option v-for='item in userList' :key='item.userId'
                     :label="item.nickName" :value="item.userId">
            {{ item.nickName }}
          </el-option>
        </el-select>
      </el-form-item>
   </el-form>

含义

label	这是给用户看的，当点击下拉菜单时，会出来选项，用户看到的选项就是这个
value	这是你点击某个label(option)之后，将对应的值给v-model绑定的值model
key	    这个呢相当于身份令牌，唯一的，防止出错，虽然没有也行，但是官网推荐还是加上为好。key是为了给 Vue 一