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

創(chuàng)新互聯(lián)一直在為企業(yè)提供服務(wù)，多年的磨煉，使我們?cè)趧?chuàng)意設(shè)計(jì)，營(yíng)銷型網(wǎng)站建設(shè)到技術(shù)研發(fā)擁有了開發(fā)經(jīng)驗(yàn)。我們擅長(zhǎng)傾聽企業(yè)需求，挖掘用戶對(duì)產(chǎn)品需求服務(wù)價(jià)值，為企業(yè)制作有用的創(chuàng)意設(shè)計(jì)體驗(yàn)。核心團(tuán)隊(duì)擁有超過10多年以上行業(yè)經(jīng)驗(yàn)，涵蓋創(chuàng)意，策化，開發(fā)等專業(yè)領(lǐng)域，公司涉及領(lǐng)域有基礎(chǔ)互聯(lián)網(wǎng)服務(wù)棕樹數(shù)據(jù)中心、成都APP應(yīng)用開發(fā)、手機(jī)移動(dòng)建站、網(wǎng)頁設(shè)計(jì)、網(wǎng)絡(luò)整合營(yíng)銷。

ElementUI官網(wǎng)引導(dǎo)

Element表單生成
Element動(dòng)態(tài)增減表單,在線代碼

關(guān)鍵配置

1. template中,form和form-item的寫法和綁定
2. data里的值為空
3. methods中，向后臺(tái)獲取數(shù)據(jù)的函數(shù)寫法

 1. form,form-item,input的寫法[^code]

需要注意的是，:model和ref綁定的值不能用'form'來表示，不然會(huì)出錯(cuò)。
也就是說下面的寫法會(huì)導(dǎo)致運(yùn)行不報(bào)錯(cuò)，但是結(jié)果會(huì)顯示不出來
問題代碼:

我上的代碼里面，基本讓后臺(tái)傳回來的數(shù)據(jù)里包含prop,label,value（輸入框默認(rèn)值填入）,editable(是否可編輯)四個(gè)值。
當(dāng)然，如果你還想動(dòng)態(tài)定義類型，就讓后端多傳一個(gè)type，用v-if判斷一下type是input或者radio或者其他類型就行，網(wǎng)上也有很多類似的解讀，此處僅討論input輸入框。

2. data里的值為空[^code]

 data () {
    return {
        dynamicValidateForm: [
        domains: {}
          ],
        rules: [],
        id: ''
        }
      }

此處rules為什么不寫校驗(yàn)規(guī)則，原因是不能判斷后端會(huì)返回多少個(gè)輸入框表單類型，你就不能判斷你需要在domains里占用多少占位符。

如果你強(qiáng)行寫上rules校驗(yàn)，會(huì)導(dǎo)致界面提示你輸入沒空（就算你確實(shí)輸入了值），因?yàn)槟銢]有在domains里寫上若干個(gè)對(duì)象(如下)，但是現(xiàn)在的需求是讓后端定義數(shù)量，所以前端不能確定多少個(gè)就不能使用下面的寫法，所以就不能在rules里寫校驗(yàn)。

問題代碼:

 data () {
    return {
      dynamicValidateForm: [
        domains: {
          {
            prop: '',
            label: ''
          },
          {
            prop: '',
            label: ''
          }
        }
      ],
      rules: [],
      id: ''
        }
      }

3. methods中，向后臺(tái)獲取數(shù)據(jù)的函數(shù)寫法

methods中，向后臺(tái)獲取數(shù)據(jù)的函數(shù)寫法

showEdit () {
   let formData = new FormData()
   formData.append('id', this.id)
   let config = {headers: {'Content-Type': 'multipart/form-data'}}
   this.$http.post('/getform', formData, config).then(res => {
    this.dynamicValidateForm.domains = []
    for (var j = 0; j < res.data.data.length; j++) {
     var obj = {}
     obj.label = res.data.data[j].label
     obj.prop = res.data.data[j].prop
     obj.value = res.data.data[j].value
     obj.editable = res.data.data[j].editable
     this.dynamicValidateForm.domains.push(obj)
    }
    console.log(this.dynamicValidateForm.domains)
   })
  }

此處，是將id作為formData形式傳參給后臺(tái)，獲取所需要的配置數(shù)據(jù)。

this.dynamicValidateForm.domains = []

如上代碼，每次請(qǐng)求前，都需要先將數(shù)據(jù)清空，要養(yǎng)成初始化的好習(xí)慣
prop是form-item的屬性（內(nèi)部，不會(huì)顯示出來，除非你label沒寫，會(huì)默認(rèn)label=prop），label是form-item顯示值，value是輸入框顯示值，editable是布爾值，若為true,則:diabled=true,不可編輯。反之，可以編輯。

# 動(dòng)態(tài)表格生成

關(guān)鍵配置

1. el-table里，各項(xiàng)配置，其實(shí)和動(dòng)態(tài)表單差不多
2. data里的值為空
3. methods中，向后臺(tái)獲取數(shù)據(jù)的函數(shù)寫法

1.先上el-table代碼

這樣，每一行的數(shù)據(jù)，最后都會(huì)多一列編輯按鈕

2.再看data里的數(shù)據(jù)

data () {
    return {
      tableData: [],
      cols: [],
      id: ''
        }
      }

3.函數(shù)的寫法

search () {
    let formData = new FormData()
    formData.append('id', this.id)
    let config = {headers: {'Content-Type': 'multipart/form-data'}}
    this.$http.post('/gettable', formData, config).then(res => {
     this.$message({
      message: '查詢成功！',
      type: 'success'
     })
     this.cols = []
     for (var j = 0; j < res.data.data.cols_list.length; j++) {
      var obj = {}
      obj.label = res.data.data.cols_list[j].label
      obj.prop = res.data.data.cols_list[j].prop
      this.cols.push(obj)
     }
     console.log(this.cols)
     this.tableData = []
     for (var i = 0; i < res.data.data.each_row.length; i++) {
      this.tableData.push(res.data.data.each_row[i])
     }
     console.log(this.tableData)
    }, (error) => {
     this.$message.error('查詢失敗' + error.response.data.msg)
    })
  }

函數(shù)分析

1. [x] 先清空數(shù)據(jù)，this.cols = [], this.tableData = []
2. [x] cols_list是后臺(tái)發(fā)回來的列定義
3. [x] each_row是后臺(tái)發(fā)回來的行數(shù)據(jù)
4. [x] 需要注意一點(diǎn)，都是字符串,prop里的'name'屬性和下面的'name'鍵名，必須要一致，是字符串的形式，則兩者都必須是字符串，才會(huì)對(duì)應(yīng)，不然前端訪問頁面時(shí)，會(huì)在控制臺(tái)看到報(bào)錯(cuò)'T.template is not a function!'

后端代碼舉例：

data: {
  'code': 'ok',
  'cols_list': [
         {prop: 'name',label: '名字'},
         {prop: 'sex',label:'性別'}
         ],
  'each_row': [
         {'name': '小李','sex': '男'},
         {'name': '小紅','sex': '女'}
         ]  
   }

[x] 致此，兩個(gè)動(dòng)態(tài)生成都已搞定！

以上所述是小編給大家介紹的Vue+Element動(dòng)態(tài)表單動(dòng)態(tài)表格詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！