使用Avue自定义from表单

首先定义一个按钮：

<el-button type="text"  
icon="el-icon-money"  
@click.stop="rowRecharge(row)">充 值  
</el-button>

使用表单标签:

<el-dialog title="充值余额" append-to-body v-model="box" width="550px">  
<avue-form ref="form" :option="rechargeOption" v-model="rechargeForm" @submit="rechargeSubmit" />  
</el-dialog>

定义表单显示的需要填写的数据：

data() {  
return {
rechargeOption: {  
submitText: '提交',  
column: [  
{  
label: '用户id',  
prop: 'memberId',  
disabled: true,  
span: 24,  
},  
{  
label: '充值金额',  
prop: 'money',  
type: 'input',  
dataType: 'double',  
rules: [{  
required: true,  
message: "请输入充值金额",  
trigger: "blur"  
},  
{  
pattern: /^(\d+\.\d{1,2}|\d+)$/, // 正则表达式限制为两位小数或整数  
message: '充值金额只能是两位小数或整数',  
trigger: 'blur', // 触发校验的时机，可以根据需要修改  
},  
],  
span: 24,  
},  
],  
},
},}

定义需要填写form表单的默认值：

data() {  
return {
rechargeForm:{  
memberId: -1,  
money:''  
},
},}

定义传给后端的from表单对象：

data() {  
return {
form: {},
},}

定义点击充值按钮的事件：

//充值按钮  
rowRecharge(row){  
//显示充值表单并且将用户id和充值金额赋值  
this.box=true;  
//这里是给默认的from表单赋予默认值
this.rechargeForm.memberId=row.row.memberId  
this.rechargeForm.money=''  
console.log(row.row.memberId)  
console.log(row.money)  
},

from表单的提交事件：

//充值提交按钮  
rechargeSubmit(form,done){  
recharge(form).then(() => {  
this.onLoad(this.page);  
this.$message({  
type: "success",  
message: "操作成功!",  
});  
done()  
this.box=false  
  
}, error => {  
window.console.log(error);  
done()  
});  
},