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>

點擊提交按鈕的時候，可以發現，選中的數據都獲取到並且提交了。