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