# 自定义按钮
下面还有按钮显示隐藏、明细表按钮操作 【查询界面添加隐藏按钮】示例
生成的页面框架提供了自定义扩展按钮，根据下面截图[红色箭头名称]按需配置
# 1.自定义按钮
查看代码
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();
}
})
// }
}
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
# 表格按钮1
查看代码
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>
);
};
}
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
# 表格按钮2
查看代码
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>
);
}
});
}
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>
);
}
});
}
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
自定义权限按钮 →