欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年04月20日 08:31:27   作者:夢里一米七八  
這篇文章主要介紹了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)鍵配置

  1. template中,form和form-item的寫法和綁定
  2. data里的值為空
  3. 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)鍵配置

  1. el-table里,各項(xiàng)配置,其實(shí)和動(dòng)態(tài)表單差不多
  2. data里的值為空
  3. 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ù)分析

  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ì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行

    詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行

    這篇文章主要介紹了詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • vue使用echarts實(shí)現(xiàn)三維圖表繪制

    vue使用echarts實(shí)現(xiàn)三維圖表繪制

    這篇文章主要為大家詳細(xì)介紹了vue如何在項(xiàng)目中使用echarts實(shí)現(xiàn)三維圖表的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下
    2023-08-08
  • vue中nextTick用法實(shí)例

    vue中nextTick用法實(shí)例

    在本篇文章里小編給大家整理了關(guān)于vue中nextTick用法實(shí)例以及相關(guān)代碼內(nèi)容,需要的朋友們可以參考下。
    2019-09-09
  • Vue.js Ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法

    Vue.js Ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法

    Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫,同時(shí)擁有非常容易上手的API。下面通過本文給大家介紹vue.js ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法,感興趣的朋友一起看看吧
    2016-10-10
  • Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的方法代碼

    Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的方法代碼

    這篇文章主要給大家介紹了關(guān)于Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的相關(guān)資料,Pinia是Vue.js的官方狀態(tài)管理庫,輕量且功能強(qiáng)大,支持模塊化和TypeScript,PiniaPluginPersistedState是一個(gè)插件,需要的朋友可以參考下
    2024-11-11
  • Vue.extend構(gòu)造器的詳解

    Vue.extend構(gòu)造器的詳解

    這篇文章主要介紹了Vue.extend構(gòu)造器的詳解的相關(guān)資料,需要的朋友可以參考下
    2017-07-07
  • 一個(gè)基于vue3+ts+vite項(xiàng)目搭建初探

    一個(gè)基于vue3+ts+vite項(xiàng)目搭建初探

    當(dāng)市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫,下面這篇文章主要給大家介紹了一個(gè)基于vue3+ts+vite項(xiàng)目搭建的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • vue如何使用element ui表格el-table-column在里面做判斷

    vue如何使用element ui表格el-table-column在里面做判斷

    這篇文章主要介紹了vue如何使用element ui表格el-table-column在里面做判斷問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • Vue的Options用法說明

    Vue的Options用法說明

    這篇文章主要介紹了Vue的Options用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所
    2020-08-08
  • Vue之組件的自定義事件詳解

    Vue之組件的自定義事件詳解

    這篇文章主要為大家介紹了Vue之組件的自定義事件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11

最新評(píng)論