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

原创已于 2022-03-21 10:45:05 修改 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

于 2022-03-17 19:23:51 首次发布

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中从数据库获取数据并填充到下拉框（el-select）中，用于选择教师所属的教学机构。通过v-for指令遍历获取的orgOptions，展示orgname作为选项标签，存储orgid作为实际值。页面加载时调用getOrg()方法获取数据，实现数据绑定和操作功能。

目的

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

用例示范

表单部分：

<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;
        })
      }

    },
  }