自定义一个带图标的button全局组件

展示效果

组件内容(在原有element的button组件进行二次封装)

<template>
  <el-button v-if="type" :disabled="disabled" class="s-button" type="text" @click="_click">
    <el-tooltip :content="content || imgContent[type]" :placement="placement" effect="light">
      <img  :src="imgSrc[type]"/>
    </el-tooltip>
  </el-button>
</template>
<script>
export default {
  name: 'Button',
  props: {
    content: {
      type: String,
      default: ''
    },
    placement: {
      type: String,
      default: 'bottom'
    },
    type: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgSrc: {
        'add_down': require("../../../src/assets/img/button_icon/icon_add_down.png"),
        'information': require("../../../src/assets/img/button_icon/icon_information.png"),
        'add_top': require("../../../src/assets/img/button_icon/icon_add_top.png"),
        'edit': require("../../../src/assets/img/button_icon/icon_edit.png"),
        'add': require("../../../src/assets/img/button_icon/icon_add.png"),
        'start': require("../../../src/assets/img/button_icon/icon_start.png"),
        'preserve': require("../../../src/assets/img/button_icon/icon_preserve.png"),
        'exchange': require("../../../src/assets/img/button_icon/icon_exchange.png"),
        'delete': require("../../../src/assets/img/button_icon/icon_delete.png"),
        'node': require("../../../src/assets/img/button_icon/icon_node.png"),
        'protect': require("../../../src/assets/img/button_icon/icon_protect.png"),
        'eliminate': require("../../../src/assets/img/button_icon/icon_eliminate.png"),
        'catalog': require("../../../src/assets/img/button_icon/icon_catalog.png"),
        'data': require("../../../src/assets/img/button_icon/icon_data.png"),
        'urging': require("../../../src/assets/img/button_icon/icon_urging.png"),
        'cc': require("../../../src/assets/img/button_icon/icon_cc.png"),
      },
      imgContent: {
        'add_down': '在前新增用户组',
        'information': '明细',
        'add_top': '在后新增用户组',
        'edit': '编辑',
        'add': '新增',
        'start': '启动服务',
        'preserve': '保存',
        'exchange': '交换',
        'delete': '删除',
        'node': '快速配置',
        'protect': '子系统授权',
        'eliminate': '清除数据',
        'catalog': '服务目录',
        'data': '业务模拟数据设置',
        'urging': '催办',
        'cc': '抄送',
      }
    }
  },
  methods: {
　　// 这一步的方法可以不写，不过在添加点击事件时需要加上native
    _click: function () {
      this.$emit('click')
    }
  }
}
</script>
<style lang="scss" scoped>
.s-button {
  display: inline-block;
  cursor: pointer;
  padding: 0 3px;
  margin-left: 0;
  img {
    width: 20px;
  }
}
</style>

在 mian.js 全局注册

import SButton from './components/common/Button.vue'
Vue.component('SButton', SButton)

使用

<el-table-column label="操作" width="110" :align="$columnAlign">

　　<template slot-scope="{ row }">

　　　　<div class="s-button-box">

       　　<s-button type="information" content="详情" @click="rowDetails(row)"></s-button>

          <s-button type="delete" @click="delRow(row.pkId)"></s-button>

          <s-button type="edit" @click="editRow(row)"></s-button>

       </div>

　　</template>

</el-table-column>