vue implements the operation of dynamic table submission parameters to generate controls dynamically

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

 control: [{
  name: 'input1',
  cnname: 'Input Box 1',
  type: 'input',
  value: 'here'
  }, {
  name: 'time1',
  cnname: 'Time range',
  type: 'time',
  value: null
  }]

 computed: {
 // Listen to all control changes formData: function() {
  var formData = {}
  ((item) => {
  formData[] = 
  })
  return formData
 }
 }

<el-table
    v-if="tableshow"
    
    ref="multipleTable"
    :data="tables"
    border="true"
    tooltip-effect="dark"
    style="width: 100%;"
    @selection-change="selectArInfo">
    <el-table-column fixed="left" label="Serial Number" width="62px" type="index"/>
    <template v-for="(col) in tableData">
    <el-table-column
     :show-overflow-tooltip="true"
     :formatter="fmtLength"
     :prop=""
     :label=""
     :key=""
     resizable="true"
     width="120px"/>
    </template>
   </el-table>

 tables: [], 
  tableData: [dataItem: xxx,
   dataName: xxx], //Save table column names

 <el-table :data="tableDataalllist" border style="width: 100%" @sort-change="totalusercount">
  <el-table-column :label="head" :prop="head" v-for="(head, index) in header" :key="head" :sortable="Define custom sorting items">
  <template slot-scope="scope">
  {{tableDataalllist[scope.$index][index]}} // Current line data receives two parameters scope.$index;  <template>
  <el-table-column>
 <el-table>
<script>
 export default{
  data(){
   return{
   // Data structure    tableDataalllist:[{
     1,'Zhang San','23'
    },{
     2,'Li Si','15'
    },{
     3,'Wang Wu','18'
    }],
    header:['id','name','age']
   } 
  },
  methods:{
  // Accept an obj parameter   totalusercount(obj){
    () // Sort rules    () // sort by   }
  }
 }
</script>

<el-table :data="gameareatable" v-loading="cardBuyConsumeDataLoading" v-if="> 0">
 <el-table-column align="center" v-for="(item,index) in activePlayerDataPropLabelArray" :prop="" :label=""
  :key="">
  <template slot-scope="scope">
  {{[]?[]:'No data yet'}}
  </template>
 </el-table-column>
 </el-table>

export default {
 data(){
  return{
  // Data structure ActivePlayerDataPropLabelArray displays label labels that indicate the value of the current column th, prop represents the date data displayed under the current 'Date' column, data with prop 12 displayed under the 'Doudizhu' column, data with prop 15 displayed under the 'Mahjong' column,   activePlayerDataPropLabelArray:[{
    label:'date',
    prop:'date'
   },{
    label:"Director",
    prop:"12"
   },{
    label:'Mahjong',
    prop:'15'
   }],
   gameareatable:[{
    date:"2018-09-10",
    12:'Old k',
    15:'Ten Thousand'
   },{
    date:"2018-08-01",
    12:'bomb',
    15:'One' 
   },{
    date:"2018-08-02",
    12:'Pair',
    15:'Five cylinders' 
   }]
  }
 }
}