# 生成页面表单、明细表事件操作
# 下面的代码是对弹出框表单与明细表的事件说明，前端打开[表.jsx]或[表.js]文件直接添加下面的方法实现
# 表单输入、回车事件
onInit() {
//方式一
this.editFormOptions.forEach(x => {
x.forEach(option => {
if (option.field == "字段") {
option.onKeyPress = $event => {
//监听回车事件
if ($event.keyCode == 13) {
console.log("回车事件") ;
return;
}
setTimeout(() => {
console.log(this.editFormFields.字段);
//也可给其他字段设置值(实时计算)
this.editFormFields.字段1=this.editFormFields.字段2+123
}, 100);
//获取表单其他字段的值或者设置值： this.editFormFields.字段
}
}
})
})
}
//方式二
this.getFormOption("字段").onKeyPress=( $event)=>{}
//查询表单配置将上面的 this.editFormOptions改为this.searchFormOptions
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 表单输入框焦点事件
//弹出框打开后设置输入框焦点
modelOpenAfter () {
//弹出框打开后给某个字段设置焦点
setTimeout(()=>{
this.$refs.form.$refs.字段名[0].focus()
},200)
}
//或者在触发其他事件时设置焦点
this.$refs.form.$refs.字段名[0].focus()
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 表单输入框失去焦点事件
this.editFormOptions.forEach(x => {
x.forEach(option => {
if (option.field == "字段") {
option.blur = $event => {
//获取表单其他字段的值或者设置值： this.editFormFields.字段
}
}
})
})
}
//或者
this.getFormOption("字段").blur=()=>{
//获取表单其他字段的值或者设置值： this.editFormFields.字段
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 表单日期、下拉框选择事件
onInit(){
//方式一
this.editFormOptions.forEach(x => {
x.forEach(option => {
if (option.field == "字段") {
option.onChange=(val, option)=>{
//val选中的值，option下拉框选择，输出看
//这里可以给其他字段设置或者取值： this.editFormFields.字段
}
})
})
}
//方式二
this.getFormOption("字段").onChange=(val, option)=>{
//val选中的值，option下拉框选择，输出看
//这里可以给其他字段设置或者取值： this.editFormFields.字段
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 表单实时计算值
# 明细表输入框、回车事件
onInited() {
//方式一：给字段添加formatter实时计算,字段变化时给其他字段设置值
//onInited方法设置主从明细表编辑时实时计算值
this.detailOptions.columns.forEach(x => {
if (x.field == '字段') {
//将eidt设置为null不开启编辑
x.edit = null;
x.formatter = (row) => {
//给当前列同时设置上值
row.字段= (row.字段||0) * 2;
//注意：如果字段的值是与其他字段相乘的结果,合计可能不会刷新,请取消下面的注释方法
// this.updateDetailTableSummaryTotal();
//可以设置计算规则 ，如：
//return row.字段1 * row.字段2
//返回table显示的值
return (row.字段||0) * 2
}
}
})
//方式二：
this.detailOptions.columns.forEach(x => {
if (x.field == '字段') {
//如果字段是输入框，添加onKeyPress事件
x.onKeyPress = (row, column, $event) => {
//回车事件
if($event.keyCode==13){
}
if($event.keyCode=='xx'){
}
//规则自己定义
row.字段=row.字段1+row.字段2
}
//如果字段是下拉框或日期，添加onChange事件
x.onChange=(ow, val, event)=>{
}
}
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# 明细表输入框失去焦点事件
onInited() {
this.detailOptions.columns.forEach(x => {
if (x.field == '字段') {
//如果字段是输入框，添加onKeyPress事件
x.blur = (row, column, $event) => {
}
}
})
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 明细表日期、下拉框选择事件
onInited() {
this.detailOptions.columns.forEach(x => {
if (x.field == '字段') {
//字段是下拉框或日期选择事件
x.onChange=(ow, val, event)=>{
}
}
})
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 明细表实时计算值
见上面：明细表输入框事件方式一处理