This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

I’ve been working with ElementUI for a while, and my colleagues, who have been working on the backend management system, have taken some notes, but have never had the time to put these scattered notes together into a more systematic and detailed tutorial that can be saved for later.

Vue+ElementUI build background management system (actual combat series four) – form form processing

Forms are often used in projects, whether it’s adding or modifying information, Radio, Checkbox, Input, Select, and so on.

Documents: element. The eleme. IO / # / useful – CN/com…

It’s really easy to copy and paste the code right into the document, but there are some details that you need to pay attention to, like assigning values to these types of values, what kind of format to pass values in, take a look at values.

About the processing of form form, here select a few more commonly used, put together to compare, the first is the input input box, the most commonly used.

<el-form-item label=" prop="userName"> <el-input v-model=" questionform. userName" placeholder=" placeholder=" /> </el-form-item>Copy the code

In the input box, just use the V-Model directive to create a bidirectional binding on the input. It automatically selects the correct method to update the element based on the control type. Despite its magic, the V-Model is essentially just syntax sugar, listening for user input events to update the data, and especially dealing with extreme cases.

In addition, the Radio form control is used

< el - form - the item label = "category" > < 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>Copy the code

Select Form control

<el-form-item label=" department "> <el-select v-model="questionForm.organId" placeholder=" href =" href "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>Copy the code

What is worth mentioning here is the basic multiple selection. In the SELECT form control, I can select one option or multiple options, and I can also delete the selected option, which requires multiple property.

Set the multiple attribute for el-Select to enable multiple selection. In this case, the value of v-Model is an array composed of the currently selected values. By default, selected values are displayed as tags, but you can use the collapse-tags property to combine them into a single paragraph.

The steps for implementing a form are as follows

Step: Here I use the local JSON data, because the interface data is lost, it is not convenient to write demo, the rest of the unified use of mock, JSON data, if you need to use in the project, then directly modify.

Later, if you need to replace the mock data with the backend API interface, use the following code directly

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

I’ll just change it to this

Import {getZtreeList} from "@/ API /permission/role";Copy the code
 getZtreeList(params).then((res) => {
        this.getOrganList = res.data.organs;
});
Copy the code

Well, not much to say, to see the specific operation, here wrote a more ready-made demo, if you need to test, directly copy and paste into their own background management system test. Vue inside the test on the line.

1: Create a vue file and a JSON file in the test folder under views

2: Use mock. Json. The data is prepared by yourself

{" MSG ", "success", "code" : 1, "data" : {" organs ": [{" id" : 1, "organName" : "unit 1"}, {" id ": 2," organName ": "Department 2"}, {" id ": 3," organName ":" unit 3 "}, {" id ": 4," organName ":" unit 4}]}}Copy the code
Test using Demo

Example: test.vue instance code

<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: "> <el-form-item label=" prop="userName"> <el-input v-model=" questionform. userName" placeholder=" placeholder=" /> < / el - form - item > < el - form - the item label = "category" > < 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=" department "> <el-select v-model="questionForm.organId" placeholder=" href =" href "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=" grade "> <el-select V-model ="questionForm.userGrades" class="filter-item" placeholder=" selectable grade "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 "@/api/alarm/query"; export default { data() { return { questionForm: { userName: "", questionCategory: "", organName: "", organId: "", userGrades: [],}, subjectList: [" gold", "silver", "diamond"], tabMapOptions: [{label: "kindergarten", the key: "KinderGarten"}, {label: "grade a" key: "firstGrade"}, {label: "grade 2", the key: "secondGrade"}, {label: "third grade", the key: "ThreeGrade"}, {label: "fourth grade", the key: "fourthGrade"}, {label: "grade five," key: "fifthGrade"}, {label: "the sixth grade," key: "SixGrade"}, {label: "gradeSchool", key: "gradeSchool"},], getOrganList: [],}; }, created() {// load the department 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; }); }, // add user async createData() {const params = this.questionForm; alert(JSON.stringify(params)); ,}}}; </script> <style scoped> .tab-container { margin: 30px; } </style>Copy the code

When you click the submit button, you can find that all the selected data has been obtained and submitted.