vue下拉框数据填充

最新推荐文章于 2024-08-14 09:18:29 发布

封小荷

最新推荐文章于 2024-08-14 09:18:29 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue 下拉框

本文链接：https://blog.youkuaiyun.com/qq_41186500/article/details/99636778

本文介绍如何在Vue应用中填充和渲染下拉框数据，详细讲解了在Vue组件中操作数据绑定到下拉列表的过程。

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

vue中下拉框渲染数据

在这里插入图片描述

<template>
	<span>部门：</span>
	<el-select placeholder="请选择">
	  <el-option
	    v-for="(item,index) in groupname"
	    :key="index"
	    :label="item"
	    :value="item"
	  />
	</el-select>
</template>

<script>
// 调用接口  a:存放部门信息的接口名称   b:接口路径  
import { fetchlist } from 'b'

export default {
	data(){
		return {
			groupname: [] // 初始化下拉列表为空
		}
	},
	created(){
		this.getGroup（) // 调用获取信息的接口
	},
	methods(){
		getGroup(){
			// groupname：存放部门下拉信息的数组   fullname：部门在数据库中的字段名
			fetchlist.then(res => {
				// 方法一 ES6方法遍历填数据
				res.forEach(item => {
					this.groupname.push(item.fullname)
				})
				// 方法二 for循环遍历填充数据
				// for(var i = 0; i < res.length; i++){
					// this.groupname.push(res[i].fullname)
				// }
			})
		}
	}
}
</script>