编辑表单实时计算一

查看代码

onInit() {

    //方式一: 监听输入框事件设置实时计算
    //数量字段添加onKeyPress事件，输入时自动计算总价字段的值
    this.editFormOptions.forEach((x) => {
        x.forEach((item) => {
            //将总价字段设置为只读
            if(item.field=='Total'){
                item.readonly=true;
            }
            //监听输入框事件，给其他字段设置值
            if (item.field == 'Qty') {
                item.onKeyPress = (Qty) => {
                    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);
                };
            }
        });
    });
}

编辑表单实时计算二

查看代码

通过 render 计算

onInit() {
    //方式一: 监听输入框事件设置实时计算
    //注意此种方式需要在、新建编辑前手动设置值(在后台也可以设置)
    this.editFormOptions.forEach((x) => {
        x.forEach((item) => {
             if(item.field=='Total'){
                item.render= (h, { }) => {
                    return (
                        //总价=数量*单价
                        <el-input disabled value={(this.formFields.qty || 0) * (this.formFields.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;
}

编辑表单实时计算三

查看代码

通过 render 计算

onInit() {
    //方式一: 监听输入框事件设置实时计算
    //注意此种方式需要在、新建编辑前手动设置值(在后台也可以设置)
    this.editFormOptions.forEach((x) => {
        x.forEach((item) => {
             if(item.field=='Total'){
                item.render= (h, { }) => {
                    return (
                        <div style="display:flex;align-items: center;">
                            <div style="color:rgb(104 98 98)">
                                {(this.formFields.qty || 0) * (this.formFields.price || 0)}
                            </div>
                            <span>元</span>
                        </div>
                    )}
            }
        });
    });
},
//注意复制到生成的[表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;
}