# 自定义弹出框、多弹出框
# 文件结构
# js文件代码
import gridHeader from './Demo_Product/Demo_ProductGridHeader.vue';
let extension = {
components: {
//查询界面扩展组件
gridHeader: gridHeader,
gridBody: '',
gridFooter: '',
//新建、编辑弹出框扩展组件
modelHeader: '',
modelBody: '',
modelFooter: ''
},
methods: {
onInited() {
//添加一个页面
this.buttons.splice(3, 0, {
name: '弹出框1', //按钮名称
icon: 'el-icon-document', //按钮图标https://element.eleme.cn/#/zh-CN/component/icon
type: 'primary', //按钮样式vue2版本见iview文档button，vue3版本见element ui文档button
plain: true,
onClick: ()=> {
let rows = this.getSelectRows();
if (!rows.length) {
return this.$message.error('请选中行数据');
}
this.$refs.gridHeader.openModel1(rows);
}
});
//在表格【备注】字段前面添加一个按钮
let index = this.columns.findIndex((x) => {
return x.field == 'Remark';
});
//添加自定义列
this.columns.splice(index, 0, {
title: '按钮', //按钮名称
field: '按钮',
align: 'center',
render: (h, { row, column, index }) => {
return (
<div>
<el-button
onClick={($e) => {
$e.stopPropagation();
this.$refs.gridHeader.openModel2(row, column, index);
}}
style=" height:23px;padding: 0px 8px !important;"
size="small"
type="primary"
plain
>
弹出框2
</el-button>
</div>
);
}
});
}
};
export default extension;
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
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
# 自定义Demo_ProductGridHeader.vue文件代码
<template>
<!-- 弹出框一 -->
<vol-box :lazy="true" v-model="model1" title="弹出框1" :width="700" :padding="5" :onModelClose="onModelClose">
<div style="height:400px;">弹出1框内容, 选中传入的行数据
<p>
{{ JSON.stringify(model1Rows) }}
</p>
</div>
<template #footer>
<div>
<el-button type="primary" plain size="small" @click="callParent">调用生成(父)页面对象</el-button>
<el-button type="primary" size="small" @click="closeModel1">确认</el-button>
<el-button type="default" size="small" @click="model1 = false">关闭</el-button>
</div>
</template>
</vol-box>
<!-- 弹出框二 -->
<vol-box :lazy="true" v-model="model2" title="弹出框1" :width="700" :padding="5" :onModelClose="onModelClose">
<div style="height:400px;">弹出2框内容, 当前点击的行数据
<p>
{{ JSON.stringify(model2Row) }}
</p>
</div>
<template #footer>
<div>
<el-button type="primary" plain size="small" @click="callParent">调用生成(父)页面对象</el-button>
<el-button type="primary" size="small" @click="closeModel2">确认</el-button>
<el-button type="default" size="small" @click="model2 = false">关闭</el-button>
</div>
</template>
</vol-box>
</template>
<script>
import VolBox from '@/components/basic/VolBox.vue';
//这里使用的vue2语法，也可以写成vue3语法
export default {
components: { 'vol-box': VolBox },
methods: {},
data() {
return {
model1: false,
model1Rows: [], //弹出框1传入的选中行
model2: false,
model2Row: {},//弹出框2点击的当前行数据
};
},
methods: {
openModel1(rows) { //弹出框1
this.model1Rows = rows;
this.model1 = true;
},
openModel2(row, column, index) {//弹出框2
this.model2Row = row;
this.model2 = true;
},
closeModel1() {
this.model1 = false;
},
closeModel2() {
this.model2 = false;
},
callParent() {
this.$emit('parentCall', $parent => {
//$parent就是生成页面的对象，比如可以调用页面刷新，可获取的属性与方法见【生成页面文档】,$parent.xxx直接调用
//调用刷新
$parent.search();
//获取所有选中的行数据
// $parent.getSelectRows();
this.$message.success('调用了刷新')
})
},
onModelClose() {
this.$message.success('弹出框右上角点击x关闭事件')
}
}
};
</script>
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
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