点击筛选框动态增加 多条可输入Table列 以及通过操作数组改造数据
<el-col :span="8" class="tab_group"><el-form-item label="动态筛选"><el-select v-model.trim="ruleForm.flowType" placeholder="请选择" style="width: 100%" :disabled="disabled" @change="flowTypeChange"><el-optionv-for="item in List":key="item.key":label="item.value":value="item.key"></el-option></el-select></el-form-item></el-col>
<el-col :span="24" style="margin-bottom:20px"><el-form ref="myForm" :model="csmFetr"><el-table:data="csmFetr"ref="table"header-row-class-name="customcss"size="small"row-key="id"><el-table-columnprop="flowTypeName"header-align="center"align="center"label="交易类型"></el-table-column><el-table-columnheader-align="center"align="left"label="交易详情"minWidth="180"><template slot-scope="scope"><div class="tableInnerBox"> <div class="inlineTable" v-for="(item,index) in csmFetr[scope.$index].amtFlows"><span class="inlineSpan">{{item.name}}</span> <el-input class="inlineInput" v-model="item.value" :disabled="disabled"></el-input></div></div></template></el-table-column><el-table-columnheader-align="center"align="center"label="操作"width="90"><template slot-scope="scope"><el-form-item> <el-button style="vertical-align: text-top;" size="small" @click="delTradeList(scope.$index)">删除</el-button></el-form-item></template></el-table-column></el-table></el-form></el-col>
data
flowTypeOptions : [{flowType: "card",flowTypeName: "卡",eventAccount: "",details: [{key: "am",name: "分",value: "",required: true,icon: "fa-jpy"}, {key: "CardNo",name: "卡号",isSm4: true,value: "",required: true,icon: "fa-credit-card"}]}]
flowTypeChange(v){ //筛选框改变数据改造this.flowTypeOptions.forEach((item,index) => {if(item.flowType == v){this.csmFetr.push({flowTypeName:item.flowTypeName,'amtFlows':[]})item.details.forEach(element => {this.csmFetr[this.csmFetr.length-1].amtFlows.push({flowType:item.flowType,name:element.name,key:element.key,value:'',})});}});},打印改造你需要的数据格式和后端调试_this.ruleForm.amtFlows = []_this.csmFetr.forEach(item => { //提交资金流向改造var arr = {}item.amtFlows.forEach(el => {arr[el.key]=el.value});arr['eventAccount'] = '';arr['flowType'] = item.amtFlows[0].flowType;_this.ruleForm.amtFlows.push(arr);});提交ruleForm
