目的
想从数据库中把查询到的数据放到下拉框里变成选项,再进行增删改查
用例示范
表单部分:
<el-select v-model="form.tecorgid" placeholder="请选择教师所属教学机构">
<el-option
v-for="item in orgOptions"
:key="item.orgid"
:label="item.orgname"
:value="item.orgid"/>
</el-select>
js部分:
export default {
data() {
return {
orgOptions:[]
}
},
mounted() {
this.getOrg();
},
methods:{
getOrg(){
getOrgList().then((res)=>{
//console.log(res)
this.orgOptions=res.data.datalist;
})
}
},
}
使用逻辑
首先,进入页面时,调用getOrg()方法去数据库里读取所有的org,并放入orgOptions中。然后在option标签中遍历orgOptions,显示出来的label是orgname,实际上的值value是orgid。最后存储的是字段tecorgid
简要说明
value为select绑定的值
label 为select选中框内显示的值
若不设置 label则显示的值为select绑定的值,即value