点击筛选框动态增加 多条可输入Table列 以及通过操作数组改造数据

点击筛选框动态增加 多条可输入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