用数组实现多个按钮

之前在项目中,每页的按钮都有七八个,还需要设定样式、是否隐藏等需求,看别人每种要求写了一组按钮,一共三种,写了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数组中添加就可以了。

猜你喜欢

转载自blog.csdn.net/qq_37187917/article/details/88183191