场景
在应用
elementUI
的
el-select
下拉框的时候,界面展示只需要文案就足够了, 但我们传参给后端可能需要多个字段 ,如有以下后端接口返回数据:
const optionsList =[{name:'',id:'',class_name:'',class_type:'',english_name:'',is_default:false,online_worker_count:0,time:"2022-12-26 16:30:21",}...]
即需要获取当前选择的name对应的对象的所有数据
实现
使用element官方的属性:
value-key 作为 value 唯一标识的键名,绑定值为对象类型时必填
<el-form-itemv-for="(workerItem, index) in form.data.worker_groups":key="'workerGroups_'+ index"style="margin-top: 10px"><el-selectv-model="form.data.worker_groups[index]"value-key="name"filterableclearableplaceholder="请选择"><el-optionv-for="item in data.workerGroups":key="item.id":label="item.name":value="item"></el-option></el-select></el-form-item>
注意点
- el-select的v-model绑定当前的对象
- 不能直接绑定workerItem会报错,使用
form.data.worker_groups[index]
索引获取当前对象。 - el-option的value绑定最后我们想获取的当前对象
- value-key的值可以和label对应
本文转载自: https://blog.csdn.net/s18438610353/article/details/128497814
版权归原作者 楚楚梦厦 所有, 如有侵权,请联系我们删除。
版权归原作者 楚楚梦厦 所有, 如有侵权,请联系我们删除。