溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
動態表單生成
ElementUI官網引導
Element表單生成
Element動態增減表單,在線代碼
關鍵配置
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'來表示，不然會出錯。
也就是說下面的寫法會導致運行不報錯，但是結果會顯示不出來
問題代碼:
<el-form :model="form" label-width="120px" ref="form"> </el-form>
我上的代碼里面，基本讓后臺傳回來的數據里包含prop,label,value（輸入框默認值填入）,editable(是否可編輯)四個值。
當然，如果你還想動態定義類型，就讓后端多傳一個type，用v-if判斷一下type是input或者radio或者其他類型就行，網上也有很多類似的解讀，此處僅討論input輸入框。
2. data里的值為空[^code]
data () {
return {
dynamicValidateForm: [
domains: {}
],
rules: [],
id: ''
}
}
此處rules為什么不寫校驗規則，原因是不能判斷后端會返回多少個輸入框表單類型，你就不能判斷你需要在domains里占用多少占位符。
如果你強行寫上rules校驗，會導致界面提示你輸入沒空（就算你確實輸入了值），因為你沒有在domains里寫上若干個對象(如下)，但是現在的需求是讓后端定義數量，所以前端不能確定多少個就不能使用下面的寫法，所以就不能在rules里寫校驗。
問題代碼:
data () {
return {
dynamicValidateForm: [
domains: {
{
prop: '',
label: ''
},
{
prop: '',
label: ''
}
}
],
rules: [],
id: ''
}
}
3. methods中，向后臺獲取數據的函數寫法
methods中，向后臺獲取數據的函數寫法
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形式傳參給后臺，獲取所需要的配置數據。
this.dynamicValidateForm.domains = []
如上代碼，每次請求前，都需要先將數據清空，要養成初始化的好習慣
prop是form-item的屬性（內部，不會顯示出來，除非你label沒寫，會默認label=prop），label是form-item顯示值，value是輸入框顯示值，editable是布爾值，若為true,則:diabled=true,不可編輯。反之，可以編輯。
# 動態表格生成
關鍵配置
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>
這樣，每一行的數據，最后都會多一列編輯按鈕
2.再看data里的數據
data () {
return {
tableData: [],
cols: [],
id: ''
}
}
3.函數的寫法
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)
})
}
函數分析
后端代碼舉例：
data: {
'code': 'ok',
'cols_list': [
{prop: 'name',label: '名字'},
{prop: 'sex',label:'性別'}
],
'each_row': [
{'name': '小李','sex': '男'},
{'name': '小紅','sex': '女'}
]
}
[x] 致此，兩個動態生成都已搞定！
以上所述是小編給大家介紹的Vue+Element動態表單動態表格詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
