用数组实现多个按钮

之前在项目中，每页的按钮都有七八个，还需要设定样式、是否隐藏等需求，看别人每种要求写了一组按钮，一共三种，写了27个按钮，感觉页面非常的繁琐，被一顿喷后果断使用数组来实现这个功能。

代码

data() {
      return {
        buttons: [
          { style: 'warning', disabled: false, click: this.handleAdd, icon: 'md-add', label: '新增', loading: false},
          { style: 'primary', disabled: false, click: this.handleEdit, icon: 'md-create', label: '编辑', loading: false},
          { style: 'error', disabled: false, click: this.handlebatchDelete, icon: 'ios-trash', label: '删除', loading: false}，
          { style: 'primary', disabled: false, click: this.handleImport,  icon: 'ios-cloud-download', label: '导入', loading: false}
        ]
    }
}

在data中先定义这样的一组数组，在template中用循环将数组遍历出来就可以了

<template v-for="item in buttons">
          <Button :type="item.style" :disable="item.disabled" :loading="item.loading"
                  @click="item.click" :icon="item.icon" :key="item.label">{{item.label}}</Button>
 </template>

页面中就可以将这些按钮遍历出来了，如果还需要加上其他的按钮，直接在buttons数组中添加就可以了。