需求背景
项目中需要实现可自增的的行且实现每行内字段提交时校验。
代码实现
<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>
效果图