vue element 表格动态按钮

您可以使用 Vue Element 表格的 slot-scope 属性来动态渲染按钮。例如，您可以在表格中添加一个操作列，并使用 slot-scope 属性来渲染按钮，如下所示：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button @click="handleEdit(scope.row)">编辑</el-button>
    <el-button @click="handleDelete(scope.row)">删除</el-button>
  </template>
</el-table-column>

在上面的代码中，handleEdit 和 handleDelete 方法是您自己定义的方法，用于处理编辑和删除操作。您可以在这些方法中访问 scope.row 属性，以获取当前行的数据。

如果您需要动态生成按钮，您可以使用 v-for 指令来遍历一个按钮数组，并使用 v-bind 指令来动态绑定按钮的属性，如下所示：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button v-for="button in buttons" :key="button.id" :type="button.type" @click="button.handler(scope.row)">{{ button.text }}</el-button>
  </template>
</el-table-column>

在上面的代码中，buttons 是一个包含按钮信息的数组，每个按钮都有一个 id、type、text 和 handler 属性。在模板中，我们使用 v-for 指令遍历 buttons 数组，并使用 v-bind 指令动态绑定按钮的属性。当用户点击按钮时，我们调用对应按钮的 handler 方法，并将当前行的数据作为参数传递给它。