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

TDSSS

已于 2022-03-21 10:45:05 修改

阅读量2.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： elementui vue.js javascript

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

本文链接：https://blog.youkuaiyun.com/TDSSS/article/details/123558152

vue 专栏收录该内容

5 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的

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

用例示范

表单部分：

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

    },
  }