上面要求做一個(gè)根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)生成控件，然后讓用戶輸入提交查詢信息，然后動(dòng)態(tài)生成表格在顯示出來。動(dòng)態(tài)控件代碼如下

<el-form :model='formData' style='padding: 0 5px;'> <div v-if='tableshow'> <div v-for='(item,i) in control' :key='i' > <el-form-item v-if='item.type==’input’' :key='item.name' :prop='item.name' label-width='100px'> <label slot='label'>{{ item.cnname }}:</label> <el-input v-model='item.value' size='mini' /> </el-form-item> <el-form-item v-if='item.type==’time’' :key='item.name' :prop='item.name' label-width='100px'> <label slot='label'>{{ item.cnname }}:</label> <el-date-picker v-model='item.value' value-format='yyyy-MM-dd HH:mm:ss' type='date' placeholder='選擇日期'/> </el-form-item> </div> <div style='padding-left:10px; float:left'> <el-form-item prop='name' style='width: 20px; margin-bottom: 0px;'> <el-button type='primary' icon='el-icon-search' size='mini' @click='cmdsearch'> {{ $t(’table.search’) }} </el-button> </el-form-item> </div> </div> </el-form>

data格式如下

control: [{ name: ’input1’, cnname: ’輸入框1’, type: ’input’, value: ’這里’ }, { name: ’time1’, cnname: ’時(shí)間范圍’, type: ’time’, value: null }]

還要監(jiān)聽所有控件變化

computed: { // 監(jiān)聽所有控件變化 formData: function() { var formData = {} this.control.forEach((item) => { formData[item.name] = item.value }) return formData } }

動(dòng)態(tài)表格如下

<el-table v-if='tableshow' ref='multipleTable' :data='tables' border='true' tooltip-effect='dark' @selection-change='selectArInfo'> <el-table-column fixed='left' label='序號' type='index'/> <template v-for='(col) in tableData'> <el-table-column :show-overflow-tooltip='true' :formatter='fmtLength' :prop='col.dataItem' :label='col.dataName' :key='col.dataItem' resizable='true' /> </template> </el-table>

需要兩個(gè)數(shù)組，一個(gè)保存表格列名，一個(gè)保存表格數(shù)據(jù)

tables: [], tableData: [dataItem: xxx, dataName: xxx], //保存表格列名

補(bǔ)充知識(shí)：vue table表格的使用(動(dòng)態(tài)數(shù)據(jù)展示)

第一種方式

<el-table :data='tableDataalllist' border @sort-change='totalusercount'> <el-table-column :label='head' :prop='head' v-for='(head, index) in header' :key='head' :sortable='定義自定義排序項(xiàng)'> <template slot-scope='scope'> {{tableDataalllist[scope.$index][index]}} // 當(dāng)前行數(shù)據(jù) 接收兩個(gè)參數(shù)scope.$index; scope.row <template> <el-table-column> <el-table><script> export default{ data(){ return{ // 數(shù)據(jù)結(jié)構(gòu) tableDataalllist:[{ 1,’張三’,’23’ },{ 2,’李四’,’15’ },{ 3,’王五’,’18’ }], header:[’id’,’name’,’age’] } }, methods:{ // 接受一個(gè)obj參數(shù) totalusercount(obj){ console.log(obj.prop) // 排序規(guī)則 console.log(obj.order) // 排序方式 } } }</script> id name age 1 張三 23 2 李四 15 3 王五 18

第二種方式(動(dòng)態(tài)進(jìn)行列的添加)

<el-table :data='gameareatable' v-loading='cardBuyConsumeDataLoading' v-if='gameareatable.length> 0'> <el-table-column v-for='(item,index) in activePlayerDataPropLabelArray' :prop='item.prop' :label='item.label' :key='item.prop'> <template slot-scope='scope'> {{scope.row[item.prop]?scope.row[item.prop]:’暫無數(shù)據(jù)’}} </template> </el-table-column> </el-table>export default { data(){ return{ // 數(shù)據(jù)結(jié)構(gòu) activePlayerDataPropLabelArray為label標(biāo)簽顯示label表示當(dāng)前列th的顯示的值,prop表示當(dāng)前’日期’列下顯示date數(shù)據(jù),’斗地主’列下顯示prop為12的數(shù)據(jù),’麻將’列下顯示prop為15的數(shù)據(jù), activePlayerDataPropLabelArray:[{ label:’日期’, prop:’date’ },{ label:'斗地主', prop:'12' },{ label:’麻將’, prop:’15’ }], gameareatable:[{ date:'2018-09-10', 12:’老k’, 15:’一萬’ },{ date:'2018-08-01', 12:’炸彈’, 15:’一條’ },{ date:'2018-08-02', 12:’對子’, 15:’五筒’ }] } }} 日期 斗地主 麻將 2018-09-10 老k 一萬 2018-08-01 炸彈 一條 2018-08-02 對子 一萬

以上這篇vue實(shí)現(xiàn)動(dòng)態(tài)表格提交參數(shù)動(dòng)態(tài)生成控件的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。