vue提交select下拉框选中的值

向右看齐 2022-08-29 09:39 186阅读 0赞

例子

<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"
                }
            ]
        }
    }

![7082e30d7bd454719d204a1c77321388.png][]

[7082e30d7bd454719d204a1c77321388.png]: /images/20220829/da17f7ccd64f450abe9d1678bd3e295a.png