elementUI中 el-form 嵌套 el-table

前端页面显示

<el-table :data="form.contentList" border style="width: 100%" :highlight-current-row="true">
        <el-table-column  label="付款单位类型" width="130"   > 
          <template slot-scope="scope">
            <el-form-item :prop="'contentList.' + scope.$index + '.companyType'" :rules="rules.companyType">
              <el-select v-model="scope.row.companyType">
                <el-option
                  v-for="item in  payUnitType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
             </el-form-item>
          </template>
        </el-table-column>
        <el-table-column  label="付款单位" width="130">
          <template slot-scope="scope">
            <el-form-item :prop="'contentList.' + scope.$index + '.company'" :rules="rules.company">
            <el-input v-model="scope.row.company"></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="fkzh" label="付款账号" width="200" v-if="$route.query.type == 4">
          <template slot-scope="{ row, column }">
            {{row[column.property]}}
          </template>
        </el-table-column>
        <el-table-column prop="fkkhyh" label="付款开户银行" width="200" v-if="$route.query.type == 4">
          <template slot-scope="{ row, column }">
            {{row[column.property]}}
          </template>
        </el-table-column>
        <el-table-column label="分摊比列（%）" width="200">
          <template slot-scope="scope">
            <el-form-item :prop="'contentList.' + scope.$index + '.ftbl'" :rules="rules.ftbl">
            <el-input v-model="scope.row.ftbl"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column  label="减免前应收缴金额" width="130">
          <template slot-scope="scope">
            <el-form-item :prop="'contentList.' + scope.$index + '.jmqysMoney'" :rules="rules.jmqysMoney">
            <el-input v-model="scope.row.jmqysMoney"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="isreduce" label="是否减征" width="200">
              <template slot-scope="{ row, column }">
                <el-form-item  :rules="rules.isreduce">
                <el-radio v-model="row[column.property]" label="1" >是</el-radio>
                <el-radio v-model="row[column.property]" label="0" >否</el-radio>
                </el-form-item>
              </template>
        </el-table-column>
        <el-table-column  prop="reduceMoney" label="减征金额" width="200">
          <template slot-scope="{ row, column }">
            <el-form-item :rules="rules.reduceMoney">
            <el-input v-model="row[column.property]" @blur="monenyCount"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="isExempts" label="是否免征" width="200">
          <template slot-scope="{ row, column }">
            <el-form-item  :rules="rules.isExempts">
            <el-radio v-model="row[column.property]" label="1" @change="radioChange(row,'isExempts')">是</el-radio>
            <el-radio v-model="row[column.property]" label="0" @change="radioChange(row,'isExempts')">否</el-radio>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column  prop="exemptMoneys"  label="免征金额" width="200" >
          <template slot-scope="{ row, column }">
            <el-form-item :rules="rules.exemptMoneys">
            <el-input v-model="row[column.property]" @blur="monenyCount"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column  label="应收缴金额" prop="receivableMoneys" width="200">
          <template slot-scope="{ row, column }">
            <el-form-item>
            <el-input v-model="row[column.property]" ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column  label="收款账号" width="200">
          <template slot-scope="scope">
            <el-form-item :prop="'contentList.' + scope.$index + '.skzh'" :rules="rules.skzh">
            <el-input v-model="scope.row.skzh"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column  label="收款开户银行" width="200">
          <template slot-scope="scope">
            <el-form-item :prop="'contentList.' + scope.$index + '.skkhyh'"  :rules="rules.skkhyh">
            <el-select v-model="scope.row.skkhyh" @change="depositBankChange(scope.row)">
              <el-option
                v-for="item in  depositBankOptions"
                :key="item.bankOpening"
                :label="item.bankOpening"
                :value="item.bankOpening">
              </el-option>
            </el-select>
            </el-form-item>
          </template>
        </el-table-column>          
        <el-table-column prop="remark" label="备注" width="200">
          <template slot-scope="{ row, column }">
            <el-input v-model="row[column.property]"></el-input>
          </template>
        </el-table-column>
      </el-table>


data(){
return{

 rules: {
        ftbl: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        jmqysMoney: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        isreduce: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        reduceMoney: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        isExempts: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        exemptMoneys: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        receivableMoneys: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        skzh: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        skkhyh: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
       }
}
}
 methods: {
         // 表格添加按钮
    tebleAddColumn() {
      if (this.form.contentList.length == 0) {
        this.form.contentList.push({
          companyType:"",
          company:"",
          ftbl:"",
          jmqysMoney:"",
          isreduce:"",
          reduceMoney:"",
          isExempts:"",
          exemptMoneys:"",
          receivableMoneys:"",
          skzh:"",
          skkhyh:""
        });
      } else {
        let tempindex = this.form.contentList[this.form.contentList.length - 1];
        if (tempindex.receiveUnitName !== null) {
          this.form.contentList.push({
            companyType:"",
            company:"",
            ftbl:"",
            jmqysMoney:"",
            isreduce:"",
            reduceMoney:"",
            isExempts:"",
            exemptMoneys:"",
            receivableMoneys:"",
            skzh:"",
            skkhyh:""
          });
        } 
      }
    },
      // 表格删除按钮
      tebleDelColumn() {
      this.form.contentList.pop();
    },
 }