vue realizes the operation of dynamic table submission parameter dynamic generation control

  • 2021-09-16 06:05:21
  • OfStack

Above request to do a dynamic generation control according to background data, and then let the user input submit query information, and then dynamically generate a table in display. The dynamic control code is as follows


<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="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" style="width: 100px; padding-right: 5px;"/>
     </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=" Select 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('table.search') }}
     </el-button>
     </el-form-item>
    </div>
    </div>
   </el-form>

The data format is as follows


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

Also listen for all control changes


 computed: {
 //  Listen for all control changes 
 formData: function() {
  var formData = {}
  this.control.forEach((item) => {
  formData[item.name] = item.value
  })
  return formData
 }
 }

The dynamic table is as follows


<el-table
    v-if="tableshow"
    id="exportTab"
    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="col.dataItem"
     :label="col.dataName"
     :key="col.dataItem"
     resizable="true"
     width="120px"/>
    </template>
   </el-table>

Two arrays are required, one for table column names and one for table data


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

Supplementary knowledge: use of vue table tables (dynamic data presentation)

Mode 1


 <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 sort items ">
  <template slot-scope="scope">
  {{tableDataalllist[scope.$index][index]}} //  Current row data   Receive two parameters scope.$index; scope.row
  <template>
  <el-table-column>
 <el-table>
<script>
 export default{
  data(){
   return{
   //  Data structure 
    tableDataalllist:[{
     1,' Zhang 3','23'
    },{
     2,' Li 4','15'
    },{
     3,' Wang 5','18'
    }],
    header:['id','name','age']
   } 
  },
  methods:{
  //  Accept 1 A obj Parameter 
   totalusercount(obj){
    console.log(obj.prop) //  Collation rule 
    console.log(obj.order) //  Sorting mode 
   }
  }
 }
</script>
id name age
1 张3 23
2 李4 15
3 王5 18

The second way (add columns dynamically)


<el-table :data="gameareatable" v-loading="cardBuyConsumeDataLoading" v-if="gameareatable.length> 0">
 <el-table-column align="center" 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]:' Data is not available at present '}}
  </template>
 </el-table-column>
 </el-table>

export default {
 data(){
  return{
  //  Data structure  activePlayerDataPropLabelArray For label Label display label Represents the current column th The value displayed by the ,prop Represents the current ' Date ' Display under column date Data ,' Landlord fighting ' Display under column prop For 12 Data of ,' Mahjong ' Display under column prop For 15 Data of ,
   activePlayerDataPropLabelArray:[{
    label:' Date ',
    prop:'date'
   },{
    label:" Landlord fighting ",
    prop:"12"
   },{
    label:' Mahjong ',
    prop:'15'
   }],
   gameareatable:[{
    date:"2018-09-10",
    12:' Old k',
    15:'1 Ten thousand '
   },{
    date:"2018-08-01",
    12:' Bomb ',
    15:'1 Article ' 
   },{
    date:"2018-08-02",
    12:' Pair ',
    15:'5 Cylinder ' 
   }]
  }
 }
}
日期 斗地主 麻将
2018-09-10 老k 1万
2018-08-01 炸弹 1条
2018-08-02 对子 1万

Related articles: