利用vue如何实现一个动态表格提交参数的功能
创始人
2024-11-18 22:20:52
0次

动态控件代码如下


    

    

     
     
     
     
     
     
     
     
    

    

     
     
      {{ $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表格的使用(动态数据展示)

第一种方式