詳解Vue+Element的動(dòng)態(tài)表單,動(dòng)態(tài)表格(后端發(fā)送配置,前端動(dòng)態(tài)生成)
動(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)站的支持!
相關(guā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-09vue使用echarts實(shí)現(xiàn)三維圖表繪制
這篇文章主要為大家詳細(xì)介紹了vue如何在項(xiàng)目中使用echarts實(shí)現(xiàn)三維圖表的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-08-08Vue.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-10Vue3+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一個(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-05vue如何使用element ui表格el-table-column在里面做判斷
這篇文章主要介紹了vue如何使用element ui表格el-table-column在里面做判斷問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08