当涉及到按钮权限控制时，通常需要在前端和后端两方面进行处理。以下是更详细的代码示例，展示如何在前端使用 Vue.js 和 Element UI，以及在后端使用 Spring Boot 实现按钮权限控制：

  1. 前端代码（Vue.js + Element UI）：
<template>
  <div>
    <el-button v-if="hasPermission('edit')" @click="handleEdit">编辑</el-button>
    <el-button v-if="hasPermission('delete')" @click="handleDelete">删除</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      permissions: [], // 当前用户拥有的权限
    };
  },
  methods: {
    async fetchPermissions() {
      try {
        const response = await fetch('/api/permissions');
        const data = await response.json();
        this.permissions = data.permissions;
      } catch (error) {
        console.error('Failed to fetch permissions: ', error);
      }
    },
    hasPermission(permission) {
      return this.permissions.includes(permission);
    },
    handleEdit() {
      // 编辑按钮点击事件处理逻辑
    },
    handleDelete() {
      // 删除按钮点击事件处理逻辑
    },
  },
  mounted() {
    this.fetchPermissions();
  },
};
</script>

在上述代码中，我们通过 fetchPermissions 方法从后端获取当前用户的权限信息，并根据权限动态显示或隐藏按钮。

  1. 后端代码（Spring Boot）：
@RestController
public class PermissionController {

    @GetMapping("/api/permissions")
    public Map<String, List<String>> getUserPermissions() {
        // 模拟当前用户权限信息
        List<String> permissions = Arrays.asList("edit", "delete");
        Map<String, List<String>> response = new HashMap<>();
        response.put("permissions", permissions);
        return response;
    }
}

在后端代码中，我们提供了一个简单的接口 /api/permissions 来模拟获取当前用户的权限信息。