国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue2 中如何實(shí)現(xiàn)動(dòng)態(tài)表單增刪改查

StonePanda / 3403人閱讀

摘要:最近項(xiàng)目中遇到的需求是要操作大量的表單,之前的項(xiàng)目中有做過(guò)這方的研究,只不過(guò)是用來(lái)操作。添加操作上面的只是其中一個(gè)動(dòng)態(tài)列表。

最近項(xiàng)目中遇到的需求是要操作大量的表單,之前的項(xiàng)目中有做過(guò)這方的研究,只不過(guò)是用jquery來(lái)操作。

項(xiàng)目A

先簡(jiǎn)單說(shuō)說(shuō)以前項(xiàng)目A中的應(yīng)用場(chǎng)景,可能有小伙伴兒也遇到相同的需求。A項(xiàng)目是公司的OA系統(tǒng)中有的項(xiàng)目,是用java的jsp渲染的頁(yè)面,需求是要改成:嵌入APP中顯示,前后端分離, 后端返回的內(nèi)容,還不能修改, 只是后端同事做了下接口處理,返回給前端的是一大堆的表單數(shù)據(jù)。

每個(gè)表單都有多個(gè)字段表示它的屬性:

是否可編輯

表單類型 (text, textarea, select, radio, checkbox, hidden等 )

與之聯(lián)動(dòng)的其他表單

。。。
之前的方案就是各個(gè)表單類型和字段屬性進(jìn)行判斷,調(diào)用不同的UI組件(如時(shí)間日歷選擇器等)

項(xiàng)目B

現(xiàn)在遇到的項(xiàng)目,展示類型少很多,第一個(gè)想到的就是同樣的方法,不過(guò)這次使用的是Vue的雙向綁定。

以下是我在python后端項(xiàng)目中的經(jīng)驗(yàn),如果沒(méi)有興趣可以直接看最后的動(dòng)態(tài)表單部分

1 python 后端項(xiàng)目中如何引入Vue

項(xiàng)目B用的是python的jinjia2的模板, 同樣都是 {{}} 去解析數(shù)據(jù),這種情況下怎么辦呢?

{% raw %}

{% endraw %}

jinjia2中使用 raw 可以阻止解析內(nèi)部的代碼,這樣就可以引入我們的vue模板了,這里是我寫(xiě)的一個(gè)dialog彈框的組件
2 定義組件
這里以dialog彈窗組件為例子,直接上代碼

// dialog彈框
Vue.component("ms-dialog", {
  name: "ms-dialog",
  template: "#dialog-wrap",
  data: function () {
    return {
    }
  },
  props: {
    title: String,
    value: {
      type: Boolean,
      required: false
    }
  },
  computed: {
    visible: function () {
      return this.value
    }
  },
  watch: {
    visible: function (newVal) {
      if (newVal) {
        document.addEventListener("wheel", this.disabledScroll, false)
      } else {
        document.removeEventListener("wheel", this.disabledScroll, false)
      }
    }
  },
  methods: {
    confirmSuccess: function () {
      this.$emit("confirm-success")
    },
    cancelAction: function () {
      this.$emit("input", false)
    },
    disabledScroll: function (e) {
      e.preventDefault()
    }
  },
  beforeDestroy: function () {
    document.removeEventListener("scroll", this.disabledScroll, false)
  }
})
動(dòng)態(tài)表單組件

一般的需求是:

一個(gè)列表,可以實(shí)現(xiàn)列表的動(dòng)態(tài)添加,刪除。

列表中的每一項(xiàng)是動(dòng)態(tài)的表單,表單個(gè)數(shù)不確定,

有提交功能,提交或者可以保存整個(gè)表單

保存的表單,通過(guò)接口調(diào)回后,回填表單,還可以再次修改、增加、刪除等

1 如何生成動(dòng)態(tài)表單

我們的與后端商量好的數(shù)據(jù)格式可以是這樣的;

lists:  [{
  type: "input",
  defaultValue: "tom",
  value: "tom"
}, {
  type: "input",
  defaultValue: "123456",
  value: "123456"
}, {
  type: "textarea",
  defaultValue: "123456",
  value: "123456"
}, {
  type: "select",
  defaultValue: "0",
  value: "0",
  source: [{
    value: "1",
    label: "男"
  }, {
    value: "1,
    label: "女"
  }]
}]

這樣一個(gè)動(dòng)態(tài)模板就生成了,其他更多類型都可以定義。這份模板數(shù)據(jù),一般是需要緩存的。因?yàn)榻酉聛?lái)的 添加操作也需要這份數(shù)據(jù)。

添加操作

上面的template只是其中一個(gè)動(dòng)態(tài)列表。

add的方法一般是:

methods: {
 add:  function () {
   this.books.push({
    lists:  [{
      type: "input",
      defaultValue: "tom",
      value: "tom"
    }, {
      type: "input",
      defaultValue: "123456",
      value: "123456"
    }, {
      type: "textarea",
      defaultValue: "123456",
      value: "123456"
    }, {
      type: "select",
      defaultValue: "0",
      value: "0",
      source: [{
        value: "1",
        label: "男"
      }, {
        value: "1,
        label: "女"
      }]
    }]
 })
 },

這里需要注意的是,如果這份模板的數(shù)據(jù),你是通過(guò)在data屬性中定義的字段去緩存的,那有可能遇到的是你通過(guò)添加操作之后的表單的值會(huì),會(huì)隨著其中的某個(gè)表單的值一起聯(lián)動(dòng)。
具體原因,猜測(cè)是這里的數(shù)據(jù)已經(jīng)是變成響應(yīng)式的了, 又或者你 通過(guò)實(shí)例化后的值去緩存這份模板數(shù)據(jù),可能結(jié)果還是這樣。
具體代碼可能是這樣的:

var vm = new Vue({
    data: {
        books: [],
        cacheTemplate: null
    },
    methods: {
        getForms: function (argument) {
            this.$http.post(url, paras).then(res => {
                // 此處緩存了這份模板數(shù)據(jù),cacheTemplate中的數(shù)據(jù)已經(jīng)變成響應(yīng)式的了
                this.cacheTemplate = res.body.data
                this.books.push(res.body.data) // 創(chuàng)建第一動(dòng)態(tài)表單列表

                // 或者你是這是定義的的, 此時(shí)data中沒(méi)有cacheTemplate這個(gè)值, 
                // 這樣定義按理說(shuō)是非響應(yīng)式的,但實(shí)際情況并非如此,在項(xiàng)目中發(fā)現(xiàn)它還是會(huì)影響其他表單
                vm.cacheTemplate = res.body.data
                this.books.push(res.body.data) // 創(chuàng)建第一動(dòng)態(tài)表單列表
            }, res => {

            })
        },
        add: function () {
            // 此處你會(huì)發(fā)現(xiàn)你新創(chuàng)建的表單的值會(huì)影響其他表單
            // log出來(lái)this.cacheTemplate你會(huì)發(fā)現(xiàn)里面的值已經(jīng)發(fā)生了變換
            this.books.push(this.cacheTemplate)
        }
    }
})

這里this.cacheTemplate的值為什么會(huì)發(fā)生變換,沒(méi)有搞明白, 猜測(cè)原因可能是變成響應(yīng)式了,vue中會(huì)實(shí)時(shí)監(jiān)控跟蹤,對(duì)vue原理理解好的小伙伴可以評(píng)論告訴我原因。
下面說(shuō)下我的解決方法: 我不管你是不是響應(yīng)式的,因?yàn)槭菍?duì)象,你才能監(jiān)控到變換,那我把你變成字符串不就好了。
直接上代碼:

var vm = new Vue({
    data: {
        books: [],
        cacheTemplate: null
    },
    methods: {
        getForms: function (argument) {
            this.$http.post(url, paras).then(res => {
                // 此處同樣緩存了這份模板數(shù)據(jù),不同的是把它變成了字符串
                this.cacheTemplate = JOSN.stringify(res.body)
                this.books.push(res.body) // 創(chuàng)建第一動(dòng)態(tài)表單列表
            }, res => {

            })
        },
        add: function () {
            // 此處轉(zhuǎn)化成json對(duì)象,你發(fā)現(xiàn)this.cacheTemplate中的值是沒(méi)有變換的。
            var cacheTemplate = JSON.parse(this.cacheTemplate)
            this.books.push(cacheTemplate)
        }
    }
})

這樣其他表單值變換的時(shí)候都不會(huì)影響到我這份模板的數(shù)據(jù),問(wèn)題解決了。
如果覺(jué)得本文不錯(cuò)的話,歡迎點(diǎn)贊。如有問(wèn)題, 大家一起交流和學(xué)習(xí)

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/83297.html

相關(guān)文章

  • vue2 如何實(shí)現(xiàn)動(dòng)態(tài)表單刪改

    摘要:最近項(xiàng)目中遇到的需求是要操作大量的表單,之前的項(xiàng)目中有做過(guò)這方的研究,只不過(guò)是用來(lái)操作。添加操作上面的只是其中一個(gè)動(dòng)態(tài)列表。 最近項(xiàng)目中遇到的需求是要操作大量的表單,之前的項(xiàng)目中有做過(guò)這方的研究,只不過(guò)是用jquery來(lái)操作。 項(xiàng)目A 先簡(jiǎn)單說(shuō)說(shuō)以前項(xiàng)目A中的應(yīng)用場(chǎng)景,可能有小伙伴兒也遇到相同的需求。A項(xiàng)目是公司的OA系統(tǒng)中有的項(xiàng)目,是用java的jsp渲染的頁(yè)面,需求是要改成:嵌入A...

    mmy123456 評(píng)論0 收藏0
  • vue2.0+axios+elementUI實(shí)現(xiàn)刪改

    最近嘗試使用vue+element實(shí)現(xiàn)增刪改查功能,在實(shí)現(xiàn)的過(guò)程中遇到了蠻多問(wèn)題,現(xiàn)在總結(jié)如下:首先安裝相關(guān)的插件1、根據(jù)vue官網(wǎng)推薦,使用axios進(jìn)行前后臺(tái)交互,安裝axiosnpm install axios -S2、安裝elementUI,官網(wǎng)npm i element-ui -S3、安裝 loader 模塊npm install style-loader -Dnpm install c...

    rollback 評(píng)論0 收藏0
  • Vue+Mock.js模擬登錄和表格的刪改

    摘要:表示需要攔截的請(qǐng)求類型。表示數(shù)據(jù)模板,可以是對(duì)象或字符串。表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)。指向本次請(qǐng)求的選項(xiàng)集。生成規(guī)則是可選的。返回成功的數(shù)據(jù),就是登錄成功了,否則相反。模擬登錄接下來(lái)介紹模擬表格增刪改查。 前言 關(guān)于mockjs,官網(wǎng)描述的是 1.前后端分離 2.不需要修改既有代碼,就可以攔截 Ajax 請(qǐng)求,返回模擬的響應(yīng)數(shù)據(jù)。 3.數(shù)據(jù)類型豐富 4.通過(guò)隨機(jī)數(shù)據(jù),模擬各種場(chǎng)景。 5...

    coordinate35 評(píng)論0 收藏0
  • [譯]如何使用Flask開(kāi)發(fā)一個(gè)刪改的應(yīng)用(part2)

    摘要:獲取成為開(kāi)發(fā)專家的技巧。我們可以在兩個(gè)文本框輸入筆記的標(biāo)題和內(nèi)容。在本教程中,我們將使用一個(gè)名為的工具。它是一個(gè)火狐瀏覽器的擴(kuò)展,我們可以使用它管理數(shù)據(jù)庫(kù)。安裝,打開(kāi)火狐瀏覽器,點(diǎn)擊,然后點(diǎn)找到的文件夾圖標(biāo)并點(diǎn)擊它。 showImg(https://cdn-images-1.medium.com/max/600/1*Ou6FFJJD3zhcIUU8wBZqIw.png); 教程譯文首發(fā)...

    adam1q84 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

StonePanda

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<