前言
使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的教程，可以留着以后来看。
Vue+ElementUI 搭建后台管理系统(实战系列四)- form表单的处理
在项目中，经常会用到form表单的功能，不管是添加还是修改信息，都会涉及到，Radio 单选框，Checkbox 多选框，Input 输入框，Select 选择器等等。
文档：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文件
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>
点击提交按钮的时候，可以发现，选中的数据都获取到并且提交了。
