作用域插槽渲染权限列表

作用域插槽渲染权限列表

        <!--展开列-->
        <el-table-column type="expand">
          <template v-slot="scope">
            <el-row :class="['bdbottom',i1===0 ? 'bdtop' : '']" v-for="(item1,i1) in scope.row.children" :key="item1.id">
              <!--渲染一级权限-->
              <el-col :span="5">
                <el-tag>
                  {{item1.authName}}
                </el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!--渲染二级和三级权限-->
              <el-col :span="19">
                  <!--通过for循环嵌套渲染二级权限-->
                  <el-row :class="[i2 === 0 ? '' : 'bdtop',]" v-for="(item2,i2) in item1.children" :key="item2.id">
                    <el-col :span="6">
                        <el-tag type="success">
                          {{item2.authName}}
                        </el-tag>
                        <i class="el-icon-caret-right"></i>
                    </el-col>
                    <!--通过for循环嵌套渲染三级权限-->
                    <el-col :span="18">
                      <el-tag type="warning" v-for="(item3,i3) in item2.children" :key="item3.id">
                        {{item3.authName}}
                      </el-tag>

                    </el-col>
                  </el-row>
                  <el-row></el-row>
              </el-col>
            </el-row>


          </template>
        </el-table-column>
     

接口

          {
  "id": 30,
  "roleName": "主管",
  "roleDesc": "技术负责人",
  "children": [
    {
      "id": 101,
      "authName": "商品管理",
      "path": "goods",
      "children": [
        {
          "id": 104,
          "authName": "商品列表",
          "path": "goods",
          "children": [
            {
              "id": 116,
              "authName": "商品修改",
              "path": "goods"
            }
          ]
        },
        {
          "id": 115,
          "authName": "分类参数",
          "path": "params",
          "children": [
            {
              "id": 142,
              "authName": "获取参数列表",
              "path": "categories"
            },
            {
              "id": 143,
              "authName": "创建商品参数",
              "path": "categories"
            },
            {
              "id": 144,
              "authName": "删除商品参数",
              "path": "categories"
            }
          ]
        },
        {
          "id": 121,
          "authName": "商品分类",
          "path": "categories",
          "children": [
            {
              "id": 122,
              "authName": "添加分类",
              "path": "categories"
            },
            {
              "id": 123,
              "authName": "删除分类",
              "path": "categories"
            },
            {
              "id": 149,
              "authName": "获取分类详情",
              "path": "categories"
            }
          ]
        }
      ]
    },
    {
      "id": 102,
      "authName": "订单管理",
      "path": "orders",
      "children": [
        {
          "id": 107,
          "authName": "订单列表",
          "path": "orders",
          "children": [
            {
              "id": 109,
              "authName": "添加订单",
              "path": "orders"
            }
          ]
        }
      ]
    },
    {
      "id": 103,
      "authName": "权限管理",
      "path": "rights",
      "children": [
        {
          "id": 111,
          "authName": "角色列表",
          "path": "roles",
          "children": [
            {
              "id": 129,
              "authName": "添加角色",
              "path": "roles"
            },
            {
              "id": 130,
              "authName": "删除角色",
              "path": "roles"
            },
            {
              "id": 134,
              "authName": "角色授权",
              "path": "roles"
            },
            {
              "id": 135,
              "authName": "取消角色授权",
              "path": "roles"
            },
            {
              "id": 138,
              "authName": "获取角色列表",
              "path": "roles"
            },
            {
              "id": 139,
              "authName": "获取角色详情",
              "path": "roles"
            },
            {
              "id": 140,
              "authName": "更新角色信息",
              "path": "roles"
            },
            {
              "id": 141,
              "authName": "更新角色权限",
              "path": "roles"
            }
          ]
        },
        {
          "id": 112,
          "authName": "权限列表",
          "path": "rights",
          "children": [
            {
              "id": 147,
              "authName": "查看权限",
              "path": "rights"
            }
          ]
        }
      ]
    },
    {
      "id": 125,
      "authName": "用户管理",
      "path": "users",
      "children": [
        {
          "id": 110,
          "authName": "用户列表",
          "path": "users",
          "children": [
            {
              "id": 131,
              "authName": "添加用户",
              "path": "users"
            },
            {
              "id": 132,
              "authName": "删除用户",
              "path": "users"
            },
            {
              "id": 133,
              "authName": "更新用户",
              "path": "users"
            },
            {
              "id": 136,
              "authName": "获取用户详情",
              "path": "users"
            },
            {
              "id": 137,
              "authName": "分配用户角色",
              "path": "users"
            }
          ]
        }
      ]
    },
    {
      "id": 145,
      "authName": "数据统计",
      "path": "reports",
      "children": [
        {
          "id": 146,
          "authName": "数据报表",
          "path": "reports",
          "children": [
            {
              "id": 148,
              "authName": "查看数据",
              "path": "reports"
            }
          ]
        }
      ]
    }
  ]
}