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

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

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

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

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

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

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

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