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值作为备选值