新建页面和标准数据

views 下新建 RoleView.vue，在 onMounted 中调用人物列表接口，并打印回来数据

setup(){
    onMounted(()=>{
      getRoleList().then((res)=>{
        console.log(res)
      })
    })
  }

修正 router 下的 index.ts，在用户列表同级添加

{
        path: 'role',
        name: 'role',
        meta:{
          isShow:true,
          title:'人物列表'
        },
        component: () => import('../views/RoleView.vue')
      }

下面来标准数据，在 type 下新建 role.ts

export interface ListInt {
    authority: number[],
    roleId: number,
    roleName: string
}
export class InitData {
    list:ListInt[] = []
}

修正 RoleView.vue，将页面展现出来

<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="addRole">添加人物</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="roleId" label="ID" width="180"/>
      <el-table-column prop="roleName" label="人物" width="180"/>
      <el-table-column prop="authority" label="操作">
        <template #default="scope">
          <el-button
              type="primary"
              size="small"
              @click="changeRole(scope.row)">
            修正权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs, watch} from 'vue';
import {getRoleList, getUserList} from "@/request/api";
import {InitData, ListInt} from "@/type/user";
export default defineComponent({
  name: 'HomeView',
  setup(){
    const data = reactive(new InitData())
    onMounted(()=>{
      getRoleList().then((res)=>{
        data.list = res.data
      })
    })
    return{
      ...toRefs(data)
    }
  },
  components: {},
});
</script>
<style lang="scss" scoped>
</style>

运行程序：

添加人物

点击左上角添加人物按钮弹出一个对话框即可。咱们依据 MessageBox消息弹框来写。仿制代码并稍作修正

import {ElMessage, ElMessageBox} from 'element-plus'
const addRole = () => {
      ElMessageBox.prompt('请输入人物称号', '添加', {
        confirmButtonText: '承认',
        cancelButtonText: '取消'
      })
          .then(({value}) => {//value表明输入框中填入的值
            if (value) {
              data.list.push({roleId: data.list.length + 1, roleName: value, authority: []})
            }
            ElMessage({
              type: 'success',
              message: `${value}人物添加成功`,
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: 'Input canceled',
            })
          })
    }
    return {
      ...toRefs(data),
      addRole
    }

注意，这儿如果款式有问题，能够先对 ElementUI 改为完好引入

运行：

权限列表跳转

新建 AuthorityView.vue，一起修正路由 router/index.ts，在人物列表同级添加，注意 isShow 的值为 false，暂时不显示出来

,
      {
        path: 'authority',
        name: 'authority',
        meta:{
          isShow:false,
          title:'权限列表'
        },
        component: () => import('../views/AuthorityView.vue')
      }

RoleView.vue 中添加点击修正权限时的方法 changeRole，咱们能够用路由的 query 参数传递

const changeRole = (row:ListInt)=>{
      router.push({
        path:'authority',
        query:{
          id:row.roleId,
          authority:row.authority.join(',')
        }
      })
    }
    return {
      ...toRefs(data),
      addRole,
      changeRole
    }

这样当咱们点击修正权限时，跳转权限页面就会把所需信息传过去

权限列表页面展现

咱们也能够用路由的 params 参数传递：

const changeRole = (row:ListInt)=>{
      router.push({
        name:'authority',
        params:{
          id:row.roleId,
          authority:row.authority
        }
      })
    }

在 request/api.ts 中添加权限列表接口：

//权限列表
export function getAuthorityList(){
    return service({
        url:'/getAuthorityList',
        method:'get',
    })
}

在 AuthorityView.vue 中，放入 树形控件，并恳求权限列表来填充数据。咱们能够先来打印下权限列表接口回来的数据：

export interface ListInt{
    name:string
    roleId:number
    viewRole:string
    roleList:ListInt[]
}
export class InitData {
    id:number
    authority:number[]
    constructor(id:number,authority:number[]) {
        this.id = id
        this.authority = authority
    }
    list:ListInt[] = []
}

其中树形控件中 data 是要展现的数据（咱们恳求权限列表得到的数据），node-key是仅有标识（roleId），default-checked-keys 是默许勾选的节点的 key 的数组（咱们从人物列表传过来的 authority），props 是配置选项，咱们能够依据官网源码示例来写。check-strictly是在显示复选框的情况下，是否严格的遵循父子不相互相关的做法，默许为 false，咱们改为 true

<template>
  <div>
    <el-tree
        :data="list"
        show-checkbox
        node-key="roleId"
        :default-checked-keys="authority"
        :check-strictly="true"
        :props="{
          children: 'roleList',
          label: 'name',
        }"
    />
  </div>
</template>
<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs} from 'vue';
import {useRoute} from "vue-router";
import {InitData} from "@/type/authority";
import {getAuthorityList} from "@/request/api";
export default defineComponent({
  name: 'HomeView',
  setup() {
    const route = useRoute()
    const params:any = route.params;
    const data = reactive(new InitData(params.id,params.authority))
    onMounted(()=>{
      getAuthorityList().then((res)=>{
        data.list = res.data
      })
    })
    return{
      ...toRefs(data)
    }
  },
  components: {},
});
</script>
<style lang="scss" scoped>
</style>

权限列表页面修正功用

在 AuthorityView.vue 中咱们添加一个修正按钮，并给树形控件添加 ref

	<el-tree
        ref="treeRef"
        ......
    />
    <el-button type="primary" @click="changeAuthority">承认修正</el-button>

authority.ts 中添加 treeRef 用来获取树形控件节点

export class InitData {
    id:number
    authority:number[]
    constructor(id:number,authority:number[]) {
        this.id = id
        this.authority = authority
    }
    list:ListInt[] = []
    treeRef:any
}

在 changeAuthority 这个方法中打印 data.treeRef 能够在 target 中找到字段 getCheckedKeys表明选中的 key，所以咱们能够用data.treeRef.getCheckedKeys()来拿到选中的 key，然后能够用 sort 对其进行排序

const changeAuthority = ()=>{
      console.log(data.treeRef.getCheckedKeys().sort(function (a:number,b:number) {
        return a-b
      }))
    }

当然在真实开发中，咱们这儿拿到选中的 key 需求调用后台的接口，进行网络恳求改动数据。