vue3 setup 帮我设计一个页面用来提供人员权限管控。要求使用el-element 组件，涉及到el-table,el-dialog等组件。从后端接收到各菜单的权限后渲染表格数据，表格里的各菜单权限用开关展现，管理员点击关闭后,发送当前行数据到后端进行响应

Vue3 中的 `setup` 函数是一个轻量级的选项式 API，它允许我们在单文件组件中组织应用的逻辑。为了实现人员权限管控页面，我们可以按照以下步骤进行设计：

1. **引入依赖**:
首先安装 Element UI 的依赖，如果还没有安装，可以在项目根目录下运行 `npm install element-ui@^3.0.0` 或者 `yarn add element-ui@^3.0.0`。

2. **创建setup函数**:

   import { ref, onMounted } from 'vue';
   import { ElTable, ElButton, ElDialog, ElCheckbox } from 'element-plus';
   
   async function fetchPermissions() {
     // 从后端获取菜单及权限信息
     const response = await yourBackendAPI(); // 调用你的API
     return response.data;
   }

   setup() {
     const permissionsData = ref(null); // 存储权限数据
     let editingRow = null; // 当前编辑的行

     onMounted(async () => {
       permissionsData.value = await fetchPermissions();
     });

     function handleEdit(row) {
       editingRow = row;
       dialogRef.open();
     }
     
     function handleSave() {
       // 将编辑行的数据发送到后端
       const updatedRow = editingRow; // 缓存编辑行
       if (updatedRow) {
         await updatePermission(updatedRow.id);
         editingRow = null;
         dialogRef.close();
       }
     }

     function updatePermission(id) {
       const newRowData = {/* 你要更新的数据，包括 id 和已修改的开关状态 */};
       yourBackendAPI.put('/permissions', newRowData).then(response => {
         console.log('权限更新成功');
       });
     }

     return {
       permissionsData,
       handleEdit,
       handleSave,
       dialogRef: ElDialog.createRef(), // 创建对话框引用
     };
   }

3. **模板部分**:
使用 `ElTable`, `ElCheckbox`, 和 `ElDialog` 组件展示和处理数据。

   <template>
     <div>
       <el-table :data="permissionsData" @row-click="handleEdit">
         <el-table-column type="index" label="序号"></el-table-column>
         <el-table-column prop="menuName" label="菜单名称"></el-table-column>
         <el-table-column label="权限">
           <template slot-scope="scope">
             <el-checkbox v-model="scope.row.permissionEnabled" @change="handlePermissionChange(scope.$index, scope.row)"></el-checkbox>
           </template>
         </el-table-column>
         <!-- 添加其他列如操作列 -->
       </el-table>

       <el-dialog v-model="dialogRef.value" title="编辑权限">
         <template slot="footer">
           <el-button @click="dialogRef.value = false">取消</el-button>
           <el-button type="primary" @click="handleSave">保存</el-button>
         </template>
         <!-- 表格样式的编辑行内容 -->
       </el-dialog>
     </div>
   </template>

4. **处理开关改变事件**:

   function handlePermissionChange(index, row) {
     // 更新行数据，当用户关闭开关时，将权限设为false
     const newRow = {...row, permissionEnabled: !row.permissionEnabled};
     permissionsData.value[index] = newRow;
   }

5. **相关问题--:**
1. 如何在Vue3中定义和使用ref？
2. `el-dialog`如何绑定自定义的表单验证？
3. 如何在Vue组件中更好地管理状态变化？