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");
}

进入前端入门建站教程官网入口

vue3面试题：v-if 和 v-for 的优先级哪个高？

vue如何利用v-for遍历二维数组

vue项目中v-if和v-for哪个级别更高

vue项目利用v-for批量绑定按钮

v-if和v-for哪个优先级更高

标签： el-button, v-for, 遍历

上面是“el-button按钮实现v-for遍历”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_1701.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！