Vue+ElementUI 搭建后台管理系统(实战系列四)
前言
使用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>
点击提交按钮的时候,可以发现,选中的数据都获取到并且提交了。
相关文章
- ROS机器人程序设计(原书第2版)2.4.4 编译ROS功能包
- ROS机器人程序设计(原书第2版)2.4.5 使用ROS节点
- Monitorix :支持服务器和树莓派的轻量级系统监控系统
- ROS机器人程序设计(原书第2版)2.4.6 如何使用主题与节点交互
- ROS机器人程序设计(原书第2版)2.4.7 如何使用服务
- 关于CentOS 6下Hadoop占用系统态CPU高的处理办法
- ROS机器人程序设计(原书第2版)2.4.8 使用参数服务器
- 快讯 | 清华大学获批承建大数据系统软件国家工程实验室
- 使用FPM快速生成RPM包
- Ruby性能优化的几个Tip(update)
- ROS机器人程序设计(原书第2版)2.4.10 编译节点
- 关于binary search
- ROS机器人程序设计(原书第2版)2.4.11 创建msg和srv文件
- 8款适合Linux用户使用的数据库管理工具!
- 模块的设计(书摘)
- ROS机器人程序设计(原书第2版)2.4.12 使用新建的srv和msg文件
- RDS for MySQL 字符序(collation)引发的性能问题
- ROS机器人程序设计(原书第2版)2.4.14 动态参数
- lua 5.0的实现(翻译)1,2,3
- ROS机器人程序设计(原书第2版)第3章 可视化和调试工具