场景
在应用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",
}
...
]
实现
<el-form-item v-for="(workerItem, index) in form.data.worker_groups" :key="'workerGroups_'+ index"
style="margin-top: 10px">
<el-select v-model="form.data.worker_groups[index]" value-key="name" filterable clearable placeholder="请选择">
<el-option
v-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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_19531.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。