例子
<template> <div class="tab-container"> <div class="filter-container" style="margin-bottom: 20px"> <el-form :model="questionForm" ref="dataForm" label-position="left" label-width="90px" style="width: 400px; margin-left: 50px" > <el-form-item label="用户名" prop="userName"> <el-input v-model="questionForm.userName" placeholder="请输入角色名称" /> </el-form-item> <el-form-item label="昵称" prop="realName"> <el-input v-model="questionForm.realName" placeholder="请输入昵称" /> </el-form-item> <el-form-item label="部门"> <el-select v-model="questionForm.organId" placeholder="请选择" style="width: 100%" @change="changeHandler" > <el-option v-for="item in getOrganList" :key="item.id" :label="item.organName" :value="item.id" > </el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="createData()">确定</el-button> </div> </div> </div> </template> <script> //调用接口 // import { getOrgan } from "@/api/alarm/query"; export default { data() { return { questionForm: { userName: "", realName: "", organName: "", organId: "", }, getOrganList: [], }; }, created() { //加载部门 this.getOrgan(); }, methods: { changeHandler(value) { const checkedItem = this.getOrganList.find((a) => a.id === value); this.questionForm.organName = checkedItem.organName; }, //获取部门信息接口定义 getOrgan() { const params = { organId: 1, authority: 1, }; import("./mock").then((res) => { this.getOrganList = res.data.organs; }); }, //添加用户 async createData() { const params =this.questionForm; alert(JSON.stringify(params)); }, }, }; </script> <style scoped> .tab-container { margin: 30px; } </style>
json
{ "msg": "success", "code": 1, "data": { "organs": [ { "id": 1, "organName": "部门1" }, { "id": 2, "organName": "部门2" }, { "id": 3, "organName": "部门3" }, { "id": 4, "organName": "部门4" }, { "id": 5, "organName": "部门5" }, { "id": 6, "organName": "部门6" }, { "id": 7, "organName": "部门7" }, { "id": 8, "organName": "部门8" } ] } }