vue 下拉框显示从后端请求的数据

下拉框<!-- 给产品添加推广人员弹出框 --><el-dialog :title="titlePerson" :visible.sync="openAddPerson" width="1000px" append-to-body><el-select v-model="this.bindingProductPerson.recommendId" filterable placeholder="请选择" @change="selectThis"><el-optionv-for="item in notInPersons":key="item.id":label="item.name":value="item.id"></el-option></el-select><el-button type="primary" @click="binding" style="margin-left: 20px;">添加给此人</el-button>

在这里插入图片描述
还需要在data中定义变量

export default {name: "Product",dicts: ['article_status', 'apply_square_publish'],data() {return {// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,//添加过的推广人员notInPersons: [],

从后端请求数据

    showNotInPerson(){listNotInPerson(this.dialogQuery.id).then(response => {this.notInPersons = response.data;})},

后端代码

   /*** 查询未添加过该产品的推广人员*/@ApiOperation("查询未添加过该产品的推广人员")@GetMapping(value = "/notIn/{id}")public AjaxResult getNotInPersons(@PathVariable("id") String id) {return AjaxResult.success(rsShareProductService.getNotInPersons(id));}

import java.util.HashMap;
import com.qianbyy.common.constant.HttpStatus;
import com.qianbyy.common.utils.StringUtils;/*** 操作消息提醒* * @author ruoyi*/
public class AjaxResult extends HashMap<String, Object>
{private static final long serialVersionUID = 1L;/** 状态码 */public static final String CODE_TAG = "code";/** 返回内容 */public static final String MSG_TAG = "msg";/** 数据对象 */public static final String DATA_TAG = "data";/*** 初始化一个新创建的 AjaxResult 对象，使其表示一个空消息。*/public AjaxResult(){}/*** 初始化一个新创建的 AjaxResult 对象* * @param code 状态码* @param msg 返回内容*/public AjaxResult(int code, String msg){super.put(CODE_TAG, code);super.put(MSG_TAG, msg);}/*** 初始化一个新创建的 AjaxResult 对象* * @param code 状态码* @param msg 返回内容* @param data 数据对象*/public AjaxResult(int code, String msg, Object data){super.put(CODE_TAG, code);super.put(MSG_TAG, msg);if (StringUtils.isNotNull(data)){super.put(DATA_TAG, data);}}/*** 返回成功消息* * @return 成功消息*/public static AjaxResult success(){return AjaxResult.success("操作成功");}/*** 返回成功数据* * @return 成功消息*/public static AjaxResult success(Object data){return AjaxResult.success("操作成功", data);}/*** 返回成功消息* * @param msg 返回内容* @return 成功消息*/public static AjaxResult success(String msg){return AjaxResult.success(msg, null);}/*** 返回成功消息* * @param msg 返回内容* @param data 数据对象* @return 成功消息*/public static AjaxResult success(String msg, Object data){return new AjaxResult(HttpStatus.SUCCESS, msg, data);}/*** 返回错误消息* * @return*/public static AjaxResult error(){return AjaxResult.error("操作失败");}/*** 返回错误消息* * @param msg 返回内容* @return 警告消息*/public static AjaxResult error(String msg){return AjaxResult.error(msg, null);}/*** 返回错误消息* * @param msg 返回内容* @param data 数据对象* @return 警告消息*/public static AjaxResult error(String msg, Object data){return new AjaxResult(HttpStatus.ERROR, msg, data);}/*** 返回错误消息* * @param code 状态码* @param msg 返回内容* @return 警告消息*/public static AjaxResult error(int code, String msg){return new AjaxResult(code, msg, null);}/*** 方便链式调用** @param key 键* @param value 值* @return 数据对象*/@Overridepublic AjaxResult put(String key, Object value){super.put(key, value);return this;}
}

或者是下面这一种

定义下拉框

    <el-col :span="12"><el-form-item label="岗位"><el-select v-model="form.postIds" multiple placeholder="请选择岗位"><el-optionv-for="item in postOptions":key="item.postId":label="item.postName":value="item.postId":disabled="item.status == 1"></el-option></el-select></el-form-item></el-col>

定义变量

export default {name: "User",dicts: ['sys_normal_disable', 'sys_user_sex'],components: { Treeselect },data() {return {show:false,// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 用户表格数据userList: null,// 弹出层标题title: "",// 企业树选项deptOptions: undefined,// 是否显示弹出层open: false,// 企业名称deptName: undefined,// 默认密码initPassword: undefined,// 日期范围dateRange: [],// 岗位选项postOptions: [],

后端请求接口数据

    handleAdd() {this.reset();getUser().then(response => {this.postOptions = response.rows;this.roleOptions = response.roles;this.open = true;this.title = "添加用户";this.form.password = this.initPassword;});},

在这里插入图片描述
response.rows rows要与返回的结果rows名称保持一致(截图)