编辑表单实时计算
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现
方式1：绑定输入事件
vue3 代码
const onInit = ($vm) => {
gridRef=$vm
//方式一: 监听输入框事件设置实时计算
//数量字段添加onKeyPress事件，输入时自动计算总价字段的值
editFormOptions.forEach((x) => {
x.forEach((item) => {
//将总价字段设置为只读
if(item.field=='Total'){
item.readonly=true;
}
//监听输入框事件，给其他字段设置值
if (item.field == 'Qty') {
item.onKeyPress = ($e) => {
if ($e.keyCode == 13) {
console.log('回车事件');
return;
}
//将字段设置到其他字段
//总价=数量*单价
editFormFields.Total = (editFormFields.Qty || 0) * (editFormFields.Price || 0)
//如果editFormFields.字段获取不到最新值，改为下面的
// setTimeout(() => {
// console.log(editFormFields.字段);
// //也可给其他字段设置值(实时计算)
// editFormFields.字段1 = editFormFields.字段2;
// }, 100);
};
}
});
});
};
vue2 代码
onInit() {
//方式一: 监听输入框事件设置实时计算
//数量字段添加onKeyPress事件，输入时自动计算总价字段的值
this.editFormOptions.forEach((x) => {
x.forEach((item) => {
//将总价字段设置为只读
if(item.field=='Total'){
item.readonly=true;
}
//监听输入框事件，给其他字段设置值
if (item.field == 'Qty') {
item.onKeyPress = ($e) => {
if ($e.keyCode == 13) {
console.log('回车事件');
return;
}
//将字段设置到其他字段
//总价=数量*单价
this.editFormFields.Total = (this.editFormFields.Qty || 0) * (this.editFormFields.Price || 0)
//如果this.editFormFields.字段获取不到最新值，改为下面的
// setTimeout(() => {
// console.log(this.editFormFields.字段);
// //也可给其他字段设置值(实时计算)
// this.editFormFields.字段1 = this.editFormFields.字段2;
// }, 100);
};
}
});
});
}
方式2：使用render计算
vue3 代码
const onInit = ($vm) => {
gridRef=$vm
//注意此种方式需要在、新建编辑前手动设置值(在后台也可以设置)
editFormOptions.forEach((x) => {
x.forEach((item) => {
if(item.field=='字段'){
item.render= (h, { }) => {
return (
//总价=数量*单价
<el-input disabled value={(editFormFields.qty || 0) * (editFormFields.price || 0)} />
)
}
}
});
});
}
//注意复制到生成的[表js]文件时需要把原有的onInit、addBefore、updateBefore方法先删除
const addBefore=(formData)=>{//新建保存前方法计算值，详细文档见【生成页面文档】示例
//总价=数量*单价
formData.mainData.Total=(formData.mainData.字段1 || 0) * (formData.mainData.字段2 || 0)
return true;
}
const updateBefore(formData){//编辑保存前方法计算值，详细文档见【生成页面文档】示例
//总价=数量*单价
formData.mainData.Total=(formData.mainData.字段1 || 0) * (formData.mainData.字段2 || 0)
return true;
}
vue2 代码
onInit() {
//方式一: 监听输入框事件设置实时计算
//注意此种方式需要在、新建编辑前手动设置值(在后台也可以设置)
this.editFormOptions.forEach((x) => {
x.forEach((item) => {
if(item.field=='字段'){
item.render= (h, { }) => {
return (
//总价=数量*单价
<el-input disabled value={(this.editFormFields.qty || 0) * (this.editFormFields.price || 0)} />
)
}
}
});
});
},
//注意复制到生成的[表js]文件时需要把原有的onInit、addBefore、updateBefore方法先删除
addBefore(formData){//新建保存前方法计算值，详细文档见【生成页面文档】示例
//总价=数量*单价
formData.mainData.Total=(formData.mainData.qty || 0) * (formData.mainData.price || 0)
return true;
},
updateBefore(formData){//编辑保存前方法计算值，详细文档见【生成页面文档】示例
//总价=数量*单价
formData.mainData.Total=(formData.mainData.qty || 0) * (formData.mainData.price || 0)
return true;
}
方式3：使用watch监听(推荐)
在生成的vue中实现(只有新版本才支持)
vue3 代码
//写在生成的vue文件中最后一行
//监听表单输入，做实时计算
watch(() => editFormFields.监听的字段,
(newValue, oldValue) => {
editFormFields.要设置值的字段 = newValue * editFormFields.其他参与计算的字段;
}
);
vue2 代码
新版代码才支持