# 一对多基础配置
//编辑弹出框打开时默认不加载二级表数据
this.details[0].load=false
//二级表设置单选
this.details[0].single=true
//三级表设置单选
this.subDetails[0].single=true
onInit(){
//设置二、三级表格的高度
this.detailHeight=300;
//设置二、三级表显示在一行上(左右结构显示，默认是上下结构)
this.multiple.horizontal=true;
//其他属性
// multiple:{
// horizontal:false, //一对多水平显示(二级表与三级表是否左右结构显示)
// leftWidth:0,//左边二级表宽度(默认不用设置)
// rightWidth:0//右边三级表宽度(默认不用设置)
// },
//二级表分页、默认排序
this.details[0].pagination={
total: 0,
size: 30,//默认分页大小写
sizes:[10,20,30,60],
sortName: "排序字段",
order:"asc/desc"//排序方式
}
//三级表分页信息
this.subDetails[0].//操作同上
//二级表设置合计
this.details[0].summary=true;
//开启字段合计
this.details[0].columns.forEach(col=>{
if(col.field=='字段'){
col.summary=true
}
})
//三级表设置合计同上 this.subDetails[0]
//明细表内部超出是否换行显示
this.details[0].textInline=true;//三级表 this.subDetails[0].textInline=true
}
//二、三级表加载(查询)前方法
searchDetailBefore(param, table, item){
//判断是哪张表
if(table=='表名'){
//返回的数据:data.rows
}
param.value='xx'//可以设置一些参数，然后重写后台主表的GetDetailPage方法从pageData.value里面取值
//见后台开发文档上的[明细表查询]
return true; // return false不会加载数据
}
//二、三级表加载(查询)后方法(后台接口查询返回的参数)
searchDetailAfter(data, table, item){
//判断是哪张表
if(table=='表名'){
//返回的数据:data.rows
}
return true;
}
onInit(){
//二级表点击进入编辑方法
this.details[0].beginEdit=(row, column, index){
//可以判断某些或者校验决定是否可以开启编辑
//也可以根据row.字段值设置其他列是否可以编辑，如:
this.details[0].columns.forEach(col=>{
if(col.field=='字段'){
//根据字段的值设置另一个字段是否可以编辑
col.readonly=row.字段2=='xx';
}
})
return true//return false不会结束编辑
}
//二级表行结束编辑方法
this.details[0].endEditBefore=(row, column, index){
//可以判断某些或者校验决定是否可以结束编辑
return true//return false不会结束编辑
}
//三级表操作同上,this.subDetails[0]
}
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
# 二级明细参数
二级表生成的参数格式,在生成的 vue 文件里面可以看具体值
[
{
cnName: "二级表中文名",
table: "二级表名",
columns: [], //二级表格配置
sortName: "", //排序字段
key: "", //主键字段
buttons: [], //二级表的按钮
delKeys: [], //二级表删除的行主键
detail: {
cnName: "三级表中文名",
table: "三级表名",
firstTable: "主表表名",
secondTable: "二级表表名",
secondKey: "二级表主键字段",
sortName: "三级表排序字段",
key: "三级表主键字段",
buttons: [], //三级表的按钮
delKeys: [], //三级表删除的行主键
columns: [], //三级表格配置
},
},
{
...
},
{
...
}
];
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
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
# 二级明细表数据操作
//二级表ref对象
this.getTable("表名");
//获取二级表所有行数据
const rows = this.getTable("表名").rowData;
//二级表添加一行数据
const rows = this.getTable("表名").rowData;
rows.push({ a: 1, b: 2 });
//二级表添加多行数据
const rows = this.getTable("表名").rowData;
rows.push(...[{ a: 1, b: 2 }, { 行数据2 }, { 行数据3 }]);
//或者使用unshift添加到第一行
rows.unshift({});
//获取选中行
const rows = this.getTable("表名").getSelected();
//原生element table组件对象获取
const table = this.getTable("表名").$refs.table;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 三级明细表操作
操作同上二级表;
1
# 二级明细表按钮配置
//获取二级表的按钮
const buttons = this.details[0].buttons; //0是第几个二级明细表的按钮
//二级表添加一个按钮
buttons.push({
name: this.$ts("按钮名字"), //按钮名称 参照iview buttons设置此属性
hidden: false, //是否隐藏按钮
value: "唯一值，随便填", //
icon: "图标", //https://element.eleme.cn/#/zh-CN/component/icon
onClick: () => {
//触发事件
},
});
//在指定位置添加一个按钮
buttons.splice(2, 0, { 按钮配置 });
//隐藏按钮
buttons.forEach((x) => {
if (x.name == "按钮名字") {
x.hidden = true;
}
});
//删除指定位置的按钮
buttons.splice(2, 1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 三级明细表按钮配置
this.details[0]改为this.subDetails[0],其他操作同上二级表;
1
# 二、三级明细添加行默认值
addDetailRow(table, item, index) {//明细表添加行事件
//根据不同的表名返回不同的默认值,
//如果只是一对一明细表,table表名值是undefined
if (table=='表名') {
return {字段:'值'}
}
//其他返回默认空对象
return {};
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 二、三级明细实时计算联动操作
在前端开发文档上找明细表实时计算、明细表联动示例；
只需要修改查找的对象，将this.detailOptions.columns改为：
//(二级表)this.details[0].columns
//(三级表)this.subDetails[0].columns
//其他操作一样的
1
2
3
4
5
2
3
4
5