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

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"><e

victor-维克特

15446人浏览 · 2021-11-07 22:04:17

victor-维克特 · 2021-11-07 22:04:17 发布

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 一