vue elementUi 根据数组 循环出来2个button button 中的type icon @click 事件 与事件的传参都从数组中读取

在Vue和Element UI中，你可以使用v-for指令循环生成多个button组件，并从数组中读取type、icon和@click事件的信息，并将事件传参。以下是一个示例：

<template>
  <div>
    <button
      v-for="item in buttons"
      :key="item.id"
      :type="item.type"
      @click="handleButtonClick(item)"
    >
      <i :class="item.icon"></i>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: [
        { id: 1, type: 'primary', icon: 'el-icon-search', param: 'button1' },
        { id: 2, type: 'success', icon: 'el-icon-check', param: 'button2' },
      ]
    };
  },
  methods: {
    handleButtonClick(button) {
      console.log('Clicked button:', button.param);
      // 执行你的自定义逻辑
    }
  }
};
</script>

在上面的示例中，我们在div元素中使用v-for指令循环生成多个button组件。buttons数组包含了要循环生成的button的配置信息，每个button对象具有id、type、icon和param属性。我们使用v-for指令将每个button对象绑定到按钮上，并使用:key绑定唯一的key值。

在button标签中，我们使用:type绑定item.type属性的值，这样每个按钮就会根据数组中的type属性设置自己的类型。同时，我们使用:class绑定item.icon属性的值，将icon属性作为class名称，以便在按钮中显示相应的图标。

在@click事件中，我们调用handleButtonClick方法，并将item作为参数传递。在handleButtonClick方法中，我们可以访问传递的button对象，并执行相应的自定义逻辑。在示例中，我们打印出按钮的param属性。

这样，当页面渲染时，根据buttons数组中的配置信息，会自动循环生成两个按钮，并从数组中读取type、icon和@click事件的信息。当用户点击按钮时，会调用handleButtonClick方法，并将相应的button对象作为参数传递。你可以在handleButtonClick方法中根据需要使用传递的参数执行自定义逻辑。