# 自定义按钮

下面还有按钮显示隐藏、明细表按钮操作 【查询界面添加隐藏按钮】示例

生成的页面框架提供了自定义扩展按钮,根据下面截图[红色箭头名称]按需配置

An image

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