vue实现动态表格提交参数动态生成控件的操作

上面要求做一个根据后台数据动态生成控件，然后让用户输入提交查询信息，然后动态生成表格在显示出来。动态控件代码如下

    
    
     
     {{ item.cnname }}:
     
     
     
     {{ item.cnname }}:
     
     
    
    
     
     
      {{ $t('table.search') }}
     
     
    
    
   

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

动态表格如下

需要两个数组，一个保存表格列名，一个保存表格数据

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

补充知识：vue table表格的使用(动态数据展示)

第一种方式