element ui 多个按钮提示框

Element UI 提供了丰富的组件库，其中包含了一个名为`el-dialog`的弹窗组件，可以用于展示提示信息或者让用户进行选择操作。如果你需要在多个按钮上添加点击事件，并希望每个按钮触发不同的提示框，你可以这样做：

1. 首先，在 Element UI 中引入 `el-dialog` 组件：

<template>
  <el-button v-for="(button, index) in buttons" :key="index" @click="showPrompt(index)">
    {{ button.text }}
  </el-button>
</template>

<script>
import { ElDialog } from 'element-plus';

export default {
  components: {
    ElDialog,
  },
  data() {
    return {
      buttons: [
        // 按钮数组示例，可根据实际需求调整
        { text: 'Button 1', index: 1 },
        { text: 'Button 2', index: 2 },
        //...
      ],
    };
  },
  methods: {
    showPrompt(index) {
      const dialog = this.$refs.dialog;
      if (dialog && !dialog.showing) {
        dialog.show();
        // 根据不同的按钮索引显示对应的提示内容
        let promptMessage = getPromptMessage(index); // 这里假设有一个函数 getPromptMessage 获取对应提示
        dialog.content = promptMessage;
      }
    },
  },
};
</script>

在这个例子中，`showPrompt` 方法会根据给定的按钮索引动态设置弹窗的内容。你需要定义一个函数 `getPromptMessage` 来获取每个按钮关联的不同提示信息。