Ant Design Of Vue前端控件select的备选项option标签属性key和value值的区别

 

<a-select
     style="width: 100%"
     placeholder="请选择开班课程"
     v-decorator="['courseType', validatorRules.courseType]">
     <a-select-option value="">请选择开班课程</a-select-option>
     <a-select-option v-for="(course, index) in courseList" :key="index.toString()" :value="courseTypeList[index]" >
          {{ course }}
     </a-select-option>
</a-select>

courseList：[ 饮品教学班,营销实战,彩虹米课程,业绩实战班 ]

courseTypeList：[ 0,1,2,3 ]

key：key属性是用于区别于不同的<option>，多个key不能重复，通常去id作为key值。

value：value属性是选中某一项之后，<select>控件的返回值，可以去id作为value值，也可以取相关的name作为select的返回值，比如上面的例子是将课程类型作为<select>的返回值，那么传到后端的值就是对应的type值(0,1,2...)。

另外：

实例1：没有设置标签值，下拉框value值作为备选值，select返回的就是那个value值。

<pre>
    {{searchMessage.projectId}}
</pre>
<div>
   <b>项目：</b>
   <Select v-model="searchMessage.projectId">
      <Option v-for="project in managedProjects" :key="project.projectId" :value="project.projectId"></Option>
   </Select>
</div>

运行效果：

实例2：没有标签值，下拉框就以value值作为备选项。select返回值是选中的那个value值。（value值为Name）

<pre>
    {{searchMessage.projectId}}
</pre>
<div>
   <b>项目：</b>
   <Select v-model="searchMessage.projectId">
      <Option v-for="project in managedProjects" :key="project.projectId" :value="project.projectName"></Option>
   </Select>
</div>

运行效果：

实例3：有标签值（标签值为Name），下拉框就以标签值作为备选值，select的返回值是选中的那个value值。（value为id）

<pre>
    {{searchMessage.projectId}}
</pre>
<div>
   <b>项目：</b>
   <Select v-model="searchMessage.projectId">
      <Option v-for="project in managedProjects" :key="project.projectId" :value="project.projectId">{{project.projectName}}</Option>
   </Select>
</div>

运行效果：

来源：oschina

链接：https://my.oschina.net/jacklinnn/blog/4310642