如何使用Element UI的el-tree组件与el-table配合，来实现一个修改角色权限的表格？

在Element UI中，你可以结合`el-tree`（树形组件）和`el-table`（表格组件）创建一个用于管理角色权限的界面。首先，你需要设置好`el-tree`来展示角色和它们关联的权限层级结构，然后在`el-table`中显示每个角色及其具体的权限列表。以下是大致步骤：

1. **准备数据**：
- 创建一个包含角色、权限ID以及嵌套关系的数据结构。例如，每个角色是一个对象，包含了`roleName`（角色名），`permissions`（一个数组，每个元素代表一条权限）以及可能的`children`属性。

const rolesData = [
  {
    roleName: '管理员',
    permissions: ['查看', '编辑'],
    children: [
      { roleName: '普通用户', permissions: ['查看'] }
    ]
  },
  // 其他角色...
]

2. **配置el-tree**：
- 设置`el-tree`的`data`属性为你的角色数据，同时处理节点的展开与收缩以及点击事件以获取选中的角色信息。

<template>
  <el-tree :data="rolesData" :props="{ children: 'children', name: 'roleName' }"
           @node-click="handleRoleClick">
    <!-- 树节点模板 -->
    <span slot-scope="{ node, data }">{{ data.roleName }}</span>
  </el-tree>
</template>

<script>
export default {
  methods: {
    handleRoleClick(node) {
      this.selectedRole = node.data; // 存储选中的角色
    }
  },
  data() {
    return {
      selectedRole: null,
      rolesData: []
    };
  }
}
</script>

3. **配置el-table**：
- 在`el-table`中动态渲染每个角色的权限列表。可以使用`v-for`遍历`selectedRole.permissions`并生成表格行。

<template>
  <el-row>
    <el-col>
      <el-table :data="selectedRole.permissions" style="width: 100%">
        <el-table-column prop="permission" label="权限" />
      </el-table>
    </el-col>
  </el-row>
</template>

4. **表格交互**：
- 当你在`el-tree`上选择角色后，更新`el-table`的数据源，允许用户在表格中对权限进行增删操作，这通常需要处理`el-input`或其他表单控件的事件。

5. **保存更改**：
- 最后，当用户完成修改并确认保存时，根据当前的角色和权限数据发送请求到服务器进行更新。