如何使用Element UI中的el-tree和el-table组件来构建一个修改角色权限的树状表格？

在Element UI中，你可以结合`el-tree`和`el-table`来创建一个功能强大的角色权限管理界面。首先，我们需要设置数据结构，通常角色和权限会通过父子节点的形式组织成树形结构。

1. 安装依赖：
使用npm安装Element UI库：

   npm install element-ui

2. 引入组件：
在需要的文件中导入所需的组件：

   import { ElTree, ElTable } from 'element-ui';

3. 数据准备：
设计数据模型，例如：

   const roles = [
     {
       id: 1,
       name: '管理员',
       children: [
         {
           id: 2,
           name: '普通管理员',
         },
         {
           id: 3,
           name: '只读权限',
         }
       ],
       permissions: ['管理用户', '查看日志'],
     }
   ];

角色和权限通常分别作为父级节点和子节点存在。

4. `el-tree`组件示例：
展示角色权限树：

   <el-tree :data="roles" :props="{children: 'children'}">
     <span slot-scope="{ node, $index }">
       {{ node.name }}
       <!-- 如果你想显示权限列表，可以在此处添加 -->
     </span>
   </el-tree>

5. `el-table`组件示例：
创建权限表格，关联到当前选中的角色节点：

   <el-table-column prop="permissions" label="权限"></el-table-column>
   <el-table ref="table" v-model="selectedRolePermissions"></el-table>

6. 表格动态绑定：
当用户点击`el-tree`的节点时，更新表格的数据，展示当前角色的权限：

methods: {
  handleNodeClick(node) {
    this.selectedRolePermissions = node.permissions;
  }
}

7. 功能实现（如添加、删除、修改权限）：
可以添加表单控件和操作按钮，配合事件处理函数来完成权限的增删改操作，并同步到角色数据中。