<!-- 角色列表区域 -->
<el-table :data="rolelist"
border
stripe>
<!-- 展开列 -->
<el-table-column type="expand">
<template slot-scope="scope">
<el-row :class="['vcenter','bdbottom',i1===0?'bdtop':'']"
v-for="(item1,i1) in scope.row.children"
:key="item1.id">
<!-- 渲染一级权限 -->
<el-col :span="5">
<el-tag closable
@close="removeRightById(scope.row,item1.id)">{{item1.authName}}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<!-- 渲染二级和三级权限 -->
<el-col :span="19">
<!-- 通过for循环嵌套渲染二级权限 -->
<el-row :class="['vcenter',i2!==0?'bdtop':'']"
v-for="(item2,i2) in item1.children"
:key="item2.id">
<el-col :span="6">
<el-tag closable
@close="removeRightById(scope.row,item2.id)"
type="success">{{item2.authName}}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<el-col :span="18">
<el-tag type="warning"
closable
@close="removeRightById(scope.row,item3.id)"
v-for="item3 in item2.children"
:key="item3.id">
{{item3.authName}}
</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
<!-- <pre>{{scope.row.children}}</pre> -->
</template>
</el-table-column>
<!-- 索引列 -->
<el-table-column type="index">
</el-table-column>
<el-table-column label="角色名称"
prop="roleName">
</el-table-column>
<el-table-column label="角色描述"
prop="roleDesc">
</el-table-column>
<el-table-column label="操作"
width="300px">
<template slot-scope="scope">
<el-button type="primary"
icon="el-icon-edit"
size="mini"
@click="editRole(scope.row)">编辑</el-button>
<el-button type="danger"
icon="el-icon-delete"
size="mini">删除</el-button>
<el-button type="warning"
icon="el-icon-setting"
size="mini">分配权限</el-button>
</template>
</el-table-column>
</el-table>
<script>
methods: {
// 删除权限
async removeRightById (role, rightId) {
const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
if (confirmResult !== 'confirm') {
return this.$message.info('取消了删除!')
}
const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)
if (res.meta.status !== 200) {
return this.$message.error('删除权限失败!')
}
// this.getRolesList()
// 对象是引用数据类型,是引用地址,所以可以改变数据
role.children = res.data
}
}
</script>