Vue+ElementUI 搭建后台管理系统(实战系列四)

简介: 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>

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

相关文章
|
1天前
|
JavaScript Java 关系型数据库
基于SprinBoot+vue的租房管理系统2
基于SprinBoot+vue的租房管理系统2
8 0
|
1天前
|
自然语言处理 JavaScript 数据可视化
5个值得推荐的Vue后台管理框架
几个优秀好看的 Vue 后台管理框架,每个框架都有自己的特点和优势,开发者可以根据项目需求选择适合的框架。
11 0
|
4天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力,建立一个全面的、集成的、稳定的制造物流质量控制体系;对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进,满足精细化、透明化、自动化、实时化、数据化、一体化管理,实现企业柔性化制造管理。
29 3
|
5天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
10 1
|
5天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
13 0
|
Web App开发 JSON JavaScript
Vue 实战 (一) -- Vue 基础总结
Vue作为一个前端轻量级的MVVM框架有其独到之处,本文主要针对Vue1.0版本的官方文档进行梳理总结,主要包括以下几个方面:1.数据绑定2.指令3.组件4.事件5.过滤器
2396 0
|
5天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
18 0
|
6天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
6天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
6天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
11 0