用户角色列表

章志军

<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

<el-card class="box-card">
    <el-row :gutter="20">
      <el-col >
        <el-button type="primary">添加角色</el-button>
      </el-col>
    </el-row>
</el-card>
    <!--<template>-->
      <el-table :data="roleList"
         stripe style="width: 100%" border>
        <el-table-column type="expand">
          <template slot-scope="scope">

            <el-row v-for="(item1, i1) in scope.row.children" :key="item1.id" :class="['wbottom', i1 === 0 ? 'wtop' : 'wbottom']">
              <!--渲染一级权限-->
              <el-col :span="5">
              <el-tag>{{item1.authName}}</el-tag>
              </el-col>
              <!--渲染二级权限-->
              <!--<el-row v-for="(item2, i2) in scope.row.children.children" :key="item2.id">-->
              <!--<el-col :span="10">-->
                <!--<el-tag>{{item2.authName}}</el-tag>-->
              <!--</el-col>-->
              <!--</el-row>-->
            </el-row>

            <!--<pre>{{scope.row}}</pre>-->
          </template>
        </el-table-column>
        <el-table-column type="index" width="50px"></el-table-column>
        <el-table-column prop="roleName" label="职位" width="300px"></el-table-column>
        <el-table-column prop="roleDesc" label="角色" width="300px"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editRoleinfo(scope.row.id)"></el-button>
            <el-button type="primary" icon="el-icon-delete" size="mini" @click="editRoleinfo(scope.row.id)"></el-button>
            <el-tooltip class="item" effect="dark" content="分配权限" placement="top-end">
              <el-button type="primary" icon="el-icon-share" size="mini" placement="top-end" ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

    <!--</template>-->

  </div>
</template>
<script>
  export default {
    data(){
      return{
        roleList:[]
      }
    },
    created(){
      this.getRolesList()
    },
    methods:{
     async getRolesList(){
       const{data:res} = await this.$http.get('roles')
      if( res.meta.status !== 200 ){
        return this.$message.error('获取信息失败')
      }
      // debugger
      this.roleList = res.data
       console.log(this.roleList)
     }
    }
    //methods
  }
</script>
<style>
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .el-main{
    line-height: 10px!important;
  }
  .box-card {
    width: 100%;
  }

  .el-card {
    border: 0!important;
    border-radius: 0!important;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
  }
  .el-table{padding: 0 24px 24px!important;box-sizing: border-box}
  .el-col{margin-top:20px;margin-bottom:20px;}
  .wbottom{border-bottom:1px solid #ccc}
  .wtop{border-top:1px solid #ccc}
</style>