el-button按钮实现v-for遍历

html代码

<template slot-scope="scope">
	  <el-button
		v-for="(item, index) in tableBtn"
		:key="index"
		size="mini"
		:type="item.type"
		@click="tabFun(item, scope.row)"
		>{{ item.name }}</el-button >
</template>

2、js

//data
tableBtn: [{
	type: "primary",
	icon: "el-icon-document",
	click: "handleReport",
	name: "报告"
},
{
	type: "success",
	icon: "el-icon-picture-outline",
	click: "handleImage",
	name: "图像"
}, {
	type: "primary",
	icon: "el-icon-plus",
	click: "handleAdd",
	name: "新增"
},
{
	type: "danger",
	icon: "el-icon-delete",
	click: "handleDelete",
	name: "删除"
}],

//methods
tabFun(btn, row) {
  if (this[btn.click]) {
	this[btn.click](btn, row);
  } else {
	console.log("方法未定义！");
  }
},
//报告事件
handleReport(index, row) {
  console.log("handleReport");
},
//图像事件
handleImage(index, row) {
  console.log("handleImage");
},
//新增事件
handleAdd(index, row) {
  console.log("handleAdd");
},
//删除事件
handleDelete(index, row) {
  console.log("handleDelete");
}

以上是编程学习网小编为您介绍的“el-button按钮实现v-for遍历”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。