vue+ElementUI实现自增行及行字段校验

需求背景

        项目中需要实现可自增的的行且实现每行内字段提交时校验。

代码实现

<template>
  <div>
    <el-card class="box-card">
      <el-form ref="variableForm"  :model="form" :rules="rules" >

        <el-form-item :prop="'currency'" :rules='rules.currency' label="币种">
          <el-select v-model="form.currency" placeholder="请选择币种">
            <el-option
              v-for="dict in dict.type.data_currencies"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <span style="color: red">注意：账户类型为【客户账户】时，账号格式为【账簿号-客户号】</span>

        <el-table :data="form.tableData" style="width: 100%;">
          <el-table-column label="借贷方向">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.dcFlag'" :rules='rules.dcFlag'>
                <el-select v-model="scope.row.dcFlag" placeholder="请选择借贷方向">
                  <el-option
                    v-for="dict in dict.type.dc_flag"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column  label="账户类型">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.accountType'" :rules='rules.accountType'>
                <el-select v-model="scope.row.accountType" placeholder="请选择账户类型">
                  <el-option
                    v-for="dict in dict.type.account_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="账号">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.accountNo'" :rules='rules.accountNo'>
                <el-input v-model="scope.row.accountNo" placeholder="请输入账号" @change="handleAccountNoInput(scope,scope.row.accountNo)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="金额" >
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.amount'" :rules='rules.amount'>
                <el-input v-model="scope.row.amount" placeholder="请输入金额" @input="handleAmountInput(scope,scope.row.amount)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
<!--          <el-table-column label="备注" >
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.remark'" :rules='rules.remark'>
                <el-input v-model="scope.row.remark" placeholder="请输入备注" ></el-input>
              </el-form-item>
            </template>
          </el-table-column>-->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-form-item>
                <el-button
                  size="mini"
                  type="danger"
                  v-if="scope.$index > 1"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item >
          <el-button  type="success"
                      plain
                      icon="el-icon-plus"
                      size="mini"
                      @click="addLine">新增行</el-button>
          <el-button type="primary" size="mini"
                     v-hasPermi="['payOperations:accountAdjustBook:add']"
                     @click="save">交易执行</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import MyApi from "@/utils/yufu/myApi";

export default {
  name: "accountAdjustBook",
  dicts: ['account_type', 'dc_flag','data_currencies'],
  data() {
    let fullPath = this.$route.fullPath;
    return {
      form: {
        currency: '',
        tableData:[
          {
            "dcFlag":"0",
            "accountType":"0",
            "accountNo": "",
            "amount": "",
            //"remark":"",
          },{
            "dcFlag":"1",
            "accountType":"1",
            "accountNo": "",
            "amount": "",
            //"remark":"",
          }],
      },
      api: new MyApi(fullPath),
      // 表单校验
      rules: {
        currency: [
          { required: true, message: "币种不能为空", trigger: "change" },
        ],
        dcFlag: [
          { required: true, message: "借贷方向不能为空", trigger: "change" },
        ],
        accountType: [
          { required: true, message: "账户类型不能为空", trigger: "change" }
        ],
        accountNo: [
          { required: true, message: "账户号不能为空", trigger: "blur" }
        ],
        amount: [
          { required: true, message: "金额不能为空", trigger: "blur" }
        ]
      }
    }
  },
  methods:{
    addLine(){ //添加行数
      var newValue = {
        "dcFlag":"",
        "accountType":"",
        "accountNo": "",
        "amount": "",
        //"remark":"",
      }
      //添加新的行数
      this.form.tableData.push(newValue);
    },
    handleDelete(index){ //删除行数
      this.form.tableData.splice(index, 1)
    },
    reset(){
      this.form = {
        currency: '',
          tableData:[
          {
            "dcFlag":"0",
            "accountType":"0",
            "accountNo": "",
            "amount": "",
            //"remark":"",
          },{
            "dcFlag":"1",
            "accountType":"1",
            "accountNo": "",
            "amount": "",
            //"remark":"",
          }],
      };
    },
    save(){
      this.$refs["variableForm"].validate(valid => {
        if (valid) {
          this.api.add(this.form).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.reset();
          }).catch((err)=>{
            this.$modal.msgError("操作失败");
          });
        }
      })
      //这部分应该是保存提交你添加的内容
    },
    handleAmountInput(scope,value) {
      //大于等于0，且只能输入2位小数
      let val=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1');
      if(val==null||val==undefined||val==''){
        val=''
      }
      scope.row.amount = val;
    },
    handleAccountNoInput(scope,value) {
      let val = value;
      if(scope.row.accountType==='1'&&value.indexOf('-')<0){
        val='';
      }
      scope.row.accountNo = val;
    },
  }
}
</script>

效果图