# 自定义按钮
下面还有按钮显示隐藏、明细表按钮操作 【查询界面添加隐藏按钮】示例
生成的页面框架提供了自定义扩展按钮，根据下面截图[红色箭头名称]按需配置
btnClick() { //可以获取选中的行数据 //let rows= this.getSelectRows; this.$message.success('点击了按钮'); }, onInited() { //可以通过this.buttons判断有没有某些按钮权限，如果有再添加自定义按钮 // if ( this.buttons.some((x) => {return x.value === 'Add'})) { //splice在第三个按钮后面添加一个按钮 this.buttons.splice(3, 0, { name: '自定义按钮', //按钮名称 icon: 'el-icon-document', //按钮图标https://element.eleme.cn/#/zh-CN/component/icon type: 'primary', //按钮样式vue2版本见iview文档button，vue3版本见element ui文档button plain: true, onClick:()=> { this.btnClick(); } }) // } }Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
priceBtnClick(btnIndex, row, column, index, $e) { $e.stopPropagation(); this.$message.success('点击了第' + btnIndex + '个图标'); }, onInited() { //价格按钮前面增加按钮 this.columns.find((x) => { return x.field == 'Price'; }).render = (h, { row, column, index }) => { return ( <div> <el-button link onClick={($e) => { this.priceBtnClick(1, row, column, index, $e); }} class="el-icon-search" style="color: #2196F3;cursor: pointer;" ></el-button> <el-button link onClick={($e) => { this.priceBtnClick(2, row, column, index, $e); }} class="el-icon-date" style="margin-left:1px;color: #2196F3;cursor: pointer;" ></el-button> <span style="margin-left:5px">{row.Price}</span> </div> ); }; }Copied!
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
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
onInited() { //在表格备注前面加一个按钮 let index = this.columns.findIndex((x) => {return x.field == 'Remark'}); //通过js语法操作数组添加按钮 this.columns.splice(index, 0, { title: '按钮', //按钮名称 field: '按钮', render: (h, { row, column, index }) => { return ( <div> <el-button onClick={($e) => { $e.stopPropagation(); this.$message.success('点击了表格按钮') }} style=" height:23px;padding: 0px 8px !important;" size="small" type="primary" plain >点击</el-button> {/* 这里可以接着放按钮或者其他组件 */} ////这里也可以改为循环设置下按钮，其他按钮一样，使用map循环 // [ // { name: "按钮1", value: "1" }, // { name: "按钮2", value: "2" } // ].map(x => { // return <el-button // onClick={($e) => { // $e.stopPropagation(); // this.$message.success('点击了表格按钮'); // console.log(x) // }} // style=" height:23px;padding: 0px 8px !important;" // size="small" // type="primary" // plain >点击</el-button> // }) </div> ); } }); }Copied!
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
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
btn2Click(row, column, index, $e) { $e.stopPropagation(); this.$message.success('点击按钮'); }, btn1Click(row, column, index, $e) { $e.stopPropagation(); this.$message.success('点击按钮'); //可以直接调用编辑 //this.edit(row) }, dropdownClick(value, row, column, index, $e) { $e.stopPropagation(); this.$message.success('点击按钮组:' + value); }, onInited() { //表格上添加自定义按钮 this.columns.push({ title: '操作', field: '操作', width: 150, align: 'left', // 'center', render: (h, { row, column, index }) => { return ( <div> <el-button onClick={($e) => { this.btn1Click(row, column, index, $e); }} type="primary" plain style="height:26px; padding: 10px !important;" > 查看 </el-button> {/* 通过条件判断,要显示的按钮 */} {/* { index % 2 === 1 ?<el-button>修改</el-button> : <el-button>设置</el-button> } */} {/* 通过v-show控制按钮隐藏与显示 注意：v-show只是示例，如果不需要判断，将下面的v-show都去掉 下面的index % 2 === 1换成：row.字段==值 */} <el-button onClick={($e) => { this.btn2Click(row, $e); }} v-show={index % 2 === 1} type="success" plain style="height:26px;padding: 10px !important;" > 修改 </el-button> <el-button onClick={($e) => { this.btn2Click(row, $e); }} v-show={index % 2 === 0} type="warning" plain style="height:26px;padding: 10px !important;" > 设置 </el-button> <el-dropdown trigger="click" v-slots={{ dropdown: () => ( ////这里也可以改为循环设置下按钮，其他按钮一样，使用map循环 // [ // { name: "京酱肉丝", value: "1" }, // { name: "驴肉火烧", value: "2" } // ].map(x => { // return <a>{x.name}</a> // }) <el-dropdown-menu> <el-dropdown-item> <div onClick={($e) => { this.dropdownClick('京酱肉丝', row,column,index,$e); }} > 京酱肉丝 </div> </el-dropdown-item> <el-dropdown-item> <div onClick={($e) => { this.dropdownClick('驴肉火烧', row,column,index,$e); }} > 驴肉火烧 </div> </el-dropdown-item> </el-dropdown-menu> ) }} > <span style="font-size: 13px;color: #409eff;margin: 5px 0 0 10px;" class="el-dropdown-link"> 更多<i class="el-icon-arrow-right"></i> </span> </el-dropdown> </div> ); } }); }Copied!
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
97
98
99
100
101
102
103
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
97
98
99
100
101
102
103