快捷導(dǎo)航

詳解Vue+Element的動(dòng)態(tài)表單，動(dòng)態(tài)表格（后端發(fā)送配置，前端動(dòng)態(tài)生成）

更新時(shí)間：2019年04月20日 08:31:27 作者：夢(mèng)里一米七八

這篇文章主要介紹了Vue+Element動(dòng)態(tài)表單動(dòng)態(tài)表格，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

關(guān)鍵配置

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

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

 <el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicValidateForm">
    <el-form-item :key="domain.prop"
           :label="domain.label"
           :prop="domain.prop"
           :rules="rules"
           v-for="domain in dynamicValidateForm.domains">
      <el-input  type="money" 
            :disabled="domain.editable"
            autocomplete="off"
            v-model.number="domain.value">
      </el-input>
    </el-form-item>
  </el-form>

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

 <el-form :model="form" label-width="120px" ref="form">
  </el-form>

我上的代碼里面，基本讓后臺(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)鍵配置

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

1.先上el-table代碼

<el-table :data="tableData"
         border
         width="100%">
     <el-table-column
      :key="col.prop"
      :label="col.label"
      :prop="col.prop"
      v-for="col in cols">
     </el-table-column>
     <el-table-column
      label="操作"
      prop="option">
      <template slot-scope="scope">
       <el-button @click="edit(scope.row)" size="mini" type="info">
        <i class="el-icon-edit"></i>
        編輯
       </el-button>
      </template>
     </el-table-column>
    </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ù)分析

[x] 先清空數(shù)據(jù)，this.cols = [], this.tableData = []
[x] cols_list是后臺(tái)發(fā)回來的列定義
[x] each_row是后臺(tái)發(fā)回來的行數(shù)據(jù)
[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ì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: