上面要求做一個根據后臺數據動態生成控件，然后讓用戶輸入提交查詢信息，然后動態生成表格在顯示出來。動態控件代碼如下

<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: ’時間范圍’, type: ’time’, value: null }]

還要監聽所有控件變化

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

動態表格如下

<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>

需要兩個數組，一個保存表格列名，一個保存表格數據

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

補充知識：vue table表格的使用(動態數據展示)

第一種方式

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

第二種方式(動態進行列的添加)

<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]:’暫無數據’}} </template> </el-table-column> </el-table>export default { data(){ return{ // 數據結構 activePlayerDataPropLabelArray為label標簽顯示label表示當前列th的顯示的值,prop表示當前’日期’列下顯示date數據,’斗地主’列下顯示prop為12的數據,’麻將’列下顯示prop為15的數據, 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實現動態表格提交參數動態生成控件的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。