点击筛选框动态增加 多条可输入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-option
v-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-column
prop="flowTypeName"
header-align="center"
align="center"
label="交易类型">
</el-table-column>
<el-table-column
header-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-column
header-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