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