element-ui的el-select把读取到的数据放入下拉菜单

目的

想从数据库中把查询到的数据放到下拉框里变成选项，再进行增删改查

用例示范

表单部分：

<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