明细表实时计算值
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
vue3代码
//方式1:监听输入、下拉框选择事件框事件做计算
detailOptions.columns.forEach(x => {
if (x.field == '字段') {
//如果字段是输入框,添加onKeyPress事件
x.onKeyPress = (row, column, $event) => {
//回车事件
if($event.keyCode==13){
}
//规则自己定义
row.字段=row.字段1+row.字段2
}
//如果字段是下拉框或日期,添加onChange事件
x.onChange=(row, val, event)=>{
row.字段=row.字段1+row.字段2
}
}
})
//方式2:给字段添加formatter实时计算,字段变化时给其他字段设置值
detailOptions.columns.forEach(x => {
if (x.field == '字段') {
//将eidt设置为null不开启编辑
x.edit = null;
x.formatter = (row) => {
//给当前列同时设置上值
row.字段= (row.字段||0) * 2;
//调用明细表合计
// this.$refs.updateSummary(['要刷新的字段1','要刷新的字段2']);
//可以设置计算规则 ,如:
//return row.字段1 * row.字段2
//返回table显示的值
return (row.字段||0) * 2
}
}
})
vue2 代码
//方式1:监听输入、下拉框选择事件框事件做计算
onInited() {
this.detailOptions.columns.forEach(x => {
if (x.field == '字段') {
//如果字段是输入框,添加onKeyPress事件
x.onKeyPress = (row, column, $event) => {
//回车事件
if($event.keyCode==13){
}
//规则自己定义
row.字段=row.字段1+row.字段2
}
//如果字段是下拉框或日期,添加onChange事件
x.onChange=(row, val, event)=>{
row.字段=row.字段1+row.字段2
}
}
})
}
}
onInited() {
//方式2:给字段添加formatter实时计算,字段变化时给其他字段设置值
//onInited方法设置主从明细表编辑时实时计算值
this.detailOptions.columns.forEach(x => {
if (x.field == '字段') {
//将eidt设置为null不开启编辑
x.edit = null;
x.formatter = (row) => {
//给当前列同时设置上值
row.字段= (row.字段||0) * 2;
//调用明细表合计
// this.$refs.updateSummary(['要刷新的字段1','要刷新的字段2']);
//可以设置计算规则 ,如:
//return row.字段1 * row.字段2
//返回table显示的值
return (row.字段||0) * 2
}
}
})