1.引入全局样式文件

首先在vue入口文件全局引入一个样式文件global.less，这里以less文件举例（sass、css…都可） 注意不要在<style/>添加作用域限制指令scoped

<template>
    <div id="app">
        <router-view/>
    </div>
</template>
<script>
export default {
    name: 'App',
}
</script>
<style lang="less">
    @import "../src/static/less/global.less";
</style>

2.创建global.less文件

以添加自定义按钮主题名为custom为例，其中按钮分为三种状态色，也就是说每个按钮主题需要三种颜色。 分别为：

• 正常颜色
• 激活状态颜色，比正常颜色略深 (&.is-active、&:active)
• 聚焦及悬停颜色，比正常颜色略淡 (&:focus、&:hover)

以下正常颜色为#2bb97c为例如下：

body {
    .el-button--custom {
        color: #FFF;
        background-color: #2bb97c;
        border-color: #2bb97c;
        &.is-active,
        &:active {
            background: #228d5f;
            border-color: #228d5f;
            color: #FFF;
        }
        &:focus,
        &:hover {
            background: #36e399;
            border-color: #36e399;
            color: #FFF;
        }
    }
}

3.调用自定义按钮custom，直接在type=xxx填入custom

...
<el-button @click="editData('mod', scope.row)" size="mini" type="custom">修改</el-button>
...

4.效果