概述

  後臺管理系統裡面有非常多的表單需求，我們希望能夠通過寫一個on格式的資料，通過的迴圈動態地去渲染動態表單。並且能夠在外部得到渲染出來的表單資料，從而做一個入庫操作。

v-model的理解

  vue-model相當於給表單元素傳遞一個value,外部監聽input事件。所以我們自己封裝表單元件的時候也是可以傳遞一個value值，監聽input事件獲取輸入的值。

<input type="text" v-model="thing">

<!-- 等同於 -->
<input type="text" v-bind:value="thing" 
       v-on:input="thing = $event.target.value">

業務應用場景

  最近在寫一個線上教育平臺，發現在後臺新增課程的時候，每個課程所需要的引數不一樣（有的課程沒有特殊引數），使用固定表單在這個場景下使用很不優雅，而且工作量巨大。為了解決這個問題，我們可以在新增課程的時候動態的展示出課程分類表單所需要的引數，獲取輸入的課程引數，構造資料，進行入庫操作。

通過元件展示分類

<!-- reply.vue -->
<template>
  <div>
    <li>
      <div v-if="data.id != 0" @click="getfid(data.id)" :id="data.id"> {{ data.name }}</div>
      <ul v-if="data.children && data.children.length > 0">
        <Reply v-for="child in data.children" :key="child.id" :data="child"/>
      </ul>
    </li>
  </div>
</template>

<script>

  import bus from './bus.js';

  export default {

    //宣告名稱
    name: "Reply",props: ['data'],//宣告元件
    components: {},//宣告變數
    data() {
      return {
        fid: 0,}
    },//自定義過濾器
    filters: {
      myfilter: function (value) {
        value = value.slice(0,3);
        return value + "********";
      }
    },//初始化方法
    mounted() {
    },//宣告方法
    methods: {
      //點選分類id
      getfid: function (fid) {
        this.fid = fid;
        //console.log(this.fid);
        bus.$emit(
 
"msg",fid);
        localStorage.setItem("fid",this.fid);

        //取消所有高亮
        var divs = document.getElementsByClassName("bg");

        //遍歷選擇器
        for (var i = divs.length - 1; i >= 0; i--) {

          //取消高亮
          divs[i].classList.remove("bg");

        }
        //首先將當前元素高亮顯示
        var mydiv = document.getElementById(fid);
        //動態新增高亮類選擇器
   http://www.cppcns.com
 
     mydiv.classList.add("bg");
      }
    }
  }
</script>


<style>

  ul {
    padding-left: 10rem;
    list-style: none;
  }

  .bg {
    background: orange;
    color: white;
  }
</style>

採用第三方元件監聽分類的ID

<!--bus.js-->
import Vue from 'vue'

export default new Vue();

課程新增頁面

<template>
  <div>
    <heads></heads>
    <h1>課程提交頁面</h1>
    <reply :www.cppcns.comdata="mydata"/>
    <van-cell-group>
      <van-field label="課程標題" v-model="title"/>
      <van-field label="課程描述" v-model="desc" rows="5" type="textarea"/>
      <van-field label="課程價格" v-modewww.cppcns.coml="price"/>

      <div v-for="(value,key,index) in params">
        <van-field :label="key" v-model="info[key]"/>
      </div>

      <van-button color="gray" @click="addcourse">儲存課程</van-button>
    </van-cell-group>
  </div>
</template>

<script>

  //匯入其他元件
  import bus from './bus.js';
  import reply from "./reply";
  import heads from "./heads";


  export default {

    //宣告元件
    components: {
      'reply': reply,'heads': heads,},//構造方法
    created() {
      //監聽
      bus.$on('msg',target => {
        console.log(target);
        this.fid = target;
        if (this.cid === 0) {
          this.get_cate(this.fid)
        } else {
          this.$toast.fail("您已經儲存過課程了,無法再次選擇分類");
          return false;
        }
      });
    },//宣告變數
    data() {
      return {
        //資料
        mydata: {},//課程分類id
        fid: localStorage.getItem("fid"),title: "",price: "",desc: "",cid: 0,videos: [],videosrc: "",params: {},info: {}
      }
    },//初始化方法
    mounted() {
      this.get_data();
    },//宣告方法
    methods: {
      get_cate(fid) {
        this.axios.get('http://localhost:5000/getcate/',{params: {'fid': fid}}).then(result => {
          var myparams = result.data.params;
          if (myparams === '') {
            myparams = null
          }
          myparams = JSON.parse(myparams)
          this.params = myparams

          for (var key in this.params) {
            this.$set(this.info,'')
          }
          console.log(this.info)
        })
      },//新增課程
      addcourse: function () {
        var lists = [];
        for (var key in this.info) {
          lists.push({'key': key,'value': this.info[key],'label': this.params[key]})
        }

        var list_str = JSON.stringify(lists)

        var data_post = {
          fid: this.fid,title: this.title,desc: this.desc,price: this.price,id: localStorage.getItem("user_id"),}
        if (lists.length > 0) {
          data_post = {
            fid: this.fid,params:list_str
          }
        }

        this.axios.post(
          'http://localhost:5000/addcourse/',this.qs.stringify(data_post)).then((result) =&gt; {
          if (result.data.code === 200) {
            this.$toast.success('課程新增成功');
            this.cid = result.data.cid;
          } else {
            this.$toast.fail(result.data.msg);
          }
        });
      },//獲取資料
      get_data: function () {
        //傳送請求
        this.axios.get(
          'http://localhost:5000/catelist/').then((result) => {
          console.log(result);
          // 宣告根節點
          var mytree = {'id': 0,name: ""};
          mytree['children'] = result.data;
          this.mydata = mytree;
          console.log(this.mydata);
        });
      }
    }
  }
</script>


<style scoped>

  ul {
    padding-left: 10rem;
    list-style: none;
  }

</style>

小結

簡單的來說，就是我們在新增課程的時候選擇分類，會以表單的形式動態展示出該分類下面我們必傳的引數，使用者新增課程，提高效率。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。