Vue+ElementUI 搭建后台管理系统（实战系列四）

拼搏现实的明天。 2022-09-03 12:11 265阅读 0赞

##### 前言 #####

使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的教程，可以留着以后来看。

--------------------

##### Vue+ElementUI 搭建后台管理系统(实战系列四)- form表单的处理 #####

在项目中，经常会用到form表单的功能，不管是添加还是修改信息，都会涉及到，Radio 单选框，Checkbox 多选框，Input 输入框，Select 选择器等等。

文档：[https://element.eleme.io/\#/zh-CN/component/radio][https_element.eleme.io_zh-CN_component_radio]

对着文档，复制粘贴代码其实很容易，但是也要注意到一些细节问题，比如对这几个类型的取值赋值问题，以什么样的格式传值的问题，值的多看一看。

关于 form表单的处理，这里挑选了几个比较常用的，放在一起来比较一下了，首先就是input输入框，最常用到的。

<el-form-item label="用户名" prop="userName">
    <el-input  v-model="questionForm.userName"    placeholder="请输入角色名称"/>
    </el-form-item>

在输入框里面，只需要使用v-model指令用来在input上创建双向绑定即可。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

除此之外，还会用到`radio`表单控件

<el-form-item label="分类">
              <el-radio-group
                v-model="questionForm.questionCategory"
                style="margin-right: 12px"
              >
                <el-radio
                  v-for="(radio, index) in subjectList"
                  :key="index"
                  :label="radio"
                  >{
        { radio }}</el-radio
                >
              </el-radio-group>
            </el-form-item>

`select`表单控件

<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>

这里值得一提的是基础多选，在select表单控件里面，我可以选择一个选项或者选择多个选项，也可以对选择的选项进行删除的功能，需要用到multiple属性。

为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。

关于实现一个表单的步骤：如下

步骤：  
这里我用到了json本地的数据，因为掉接口数据，不太方便写demo，后面统一都用到mock，json数据了，如果需要用到项目里面，后面直接修改一下。

后面如果需要将mock数据替换成后端给的api接口的话，就直接将以下代码

getOrgan() {
          import("./mock").then((res) => {
            this.getOrganList = res.data.organs;
          });
        },

改成这样即可

//调用接口
    import {getZtreeList} from "@/api/permission/role";

getZtreeList(params).then((res) => {
            this.getOrganList = res.data.organs;
    });

好了，话不多说了，来看具体的操作吧，这里写了一个比较现成的demo,如果需要测试的话，直接复制粘贴到自己的后台管理系统的test.vue里面进行测试就行了。

1:在views底下新建一个test文件夹  
里面新建一个vue文件和一个json文件

![63d2d809191e41cce095b10a92f26abe.png][]

2：使用mock.json  
这里的数据是自己准备的，测试需要，所以就自己准备咯

{
        "msg": "success",
        "code": 1,
        "data": {
          
            "organs": [
                {
                    "id": 1,
                    "organName": "部门1"
                },
                {
                    "id": 2,
                    "organName": "部门2"
                },
                {
                    "id": 3,
                    "organName": "部门3"
                },
                {
                    "id": 4,
                    "organName": "部门4"
                }
            ]
        }
    }

##### 测试使用demo #####

例子：test.vue实例代码

<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="分类">
              <el-radio-group
                v-model="questionForm.questionCategory"
                style="margin-right: 12px"
              >
                <el-radio
                  v-for="(radio, index) in subjectList"
                  :key="index"
                  :label="radio"
                  >{
        { radio }}</el-radio
                >
              </el-radio-group>
            </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-item label="所属年级">
              <el-select
                v-model="questionForm.userGrades"
                class="filter-item"
                placeholder="选择年级"
                style="width: 100%"
                multiple
              >
                <el-option
                  v-for="item in tabMapOptions"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                />
              </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: "",
            questionCategory: "",
    
            organName: "",
            organId: "",
            userGrades: [],
          },
    
          subjectList: ["黄金", "白银", "钻石"],
    
          tabMapOptions: [
            { label: "幼儿园", key: "kinderGarten" },
            { label: "一年级", key: "firstGrade" },
            { label: "二年级", key: "secondGrade" },
            { label: "三年级", key: "threeGrade" },
            { label: "四年级", key: "fourthGrade" },
            { label: "五年级", key: "fifthGrade" },
            { label: "六年级", key: "sixGrade" },
            { label: "小学以上", key: "gradeSchool" },
          ],
    
          getOrganList: [],
        };
      },
      created() {
        //加载部门
        this.getOrgan();
      },
      methods: {
        changeHandler(value) {
          const checkedItem = this.getOrganList.find((a) => a.id === value);
          this.questionForm.organName = checkedItem.organName;
        },
        //获取部门信息接口定义
        getOrgan() {
          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>

点击提交按钮的时候，可以发现，选中的数据都获取到并且提交了。

![975c60e81662a55cc46322858941c246.png][]

[https_element.eleme.io_zh-CN_component_radio]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.io%2F%23%2Fzh-CN%2Fcomponent%2Fradio
[63d2d809191e41cce095b10a92f26abe.png]: /images/20220829/b3a990d32270448cbbbcd4b2ea3a70fa.png
[975c60e81662a55cc46322858941c246.png]: /images/20220829/3f0123a3f7bd432e858f9a7bc7062ab9.png