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

前言

使用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>
1
2
3

在输入框里面，只需要使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这里值得一提的是基础多选，在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;
      });
    },
1
2
3
4
5

改成这样即可

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

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

好了，话不多说了，来看具体的操作吧，这里写了一个比较现成的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"
            }
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

测试使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

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