详细记录项目后续之旅之角色列表目前已经做到权限管理下的角色列表：需要完善第一列的内容，对应代码标签为：使用作用域插槽

目前已经做到权限管理下的角色列表：

需要完善第一列的内容，对应代码标签为：

使用作用域插槽的方法：获取到当前行的信息

slot-scope="scope" 来取得作用域插槽:data绑定的数据，scope可以随便替换其他名称，只是定义对象来代表取得的data数据，便于使用

效果：

可以看到children中有对应角色的权限名称，使用pre标签修改一下格式，便于查看。效果：

下面，正式处理权限数据，需要将对应空白区域分两个部分，左边为一级权限显示区域，右边为二级和三级权限显示区域。最终效果：

首先，使用el-row，内部使用两个el-col，第一个el-col占用5列，第二个el-rol占用19列，一共是25列。

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

然后，对el-row使用v-for遍历,得到每一行信息，为当前行的第一列添加权限信息，使用el-tag把得到的权限变为有样式的标签。 scope.row.children获得是一级权限。 children数组里面有几个对象，就会遍历得到几个el-row。

<el-row v-for="(item1,i1) in scope.row.children" :key="item1">
    <el-col :span="5"><el-tag>{{item1.authName}}</el-tag></el-col>
    <el-col :span="19"></el-col>
</el-row>

效果：

接下来对二级和三级部分区域进行处理：

对el-row进行for循环，获得二级权限，遍历的是一级的item1

<el-row v-for="(item2,i2) in item1.children" :key="item2.id">
   <el-col :span="6"><el-tag type="success">{{item2.authName}}</el-tag></el-col>
   <el-col :span="18">
    这里面放三级权限标签                
   </el-col>
</el-row>

对于三级权限，则遍历二级的item2

小细节：当页面宽度变小时，页面内图标一行展示不下会移到下一行，设置min-width：1366px，强制页面最小宽度为1366px，即使页面缩小，图标展示不会移到下一行。

接下来，给标签调节x的样式状态，点击标签后面的x，删除当前这个权限。ele里面已经配置好了，直接在tag标签中添加closable，然后绑定一个点击事件@close="removeRight()"

对于此点击事件，点击之后，先弹出提升框，是否删除权限，进行二次确认。使用ele自带的消息提示框：

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

这是一个异步事件，需要进行下一步完善，添加await，async，捕捉错误。

async removeRight(){
       const confirmResult=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)

        if(confirmResult!=='confirm'){
          return this.$message.info('取消了删除')
        }
        
    }