1. Create component rights.vue

Import route, rights is a child page under HOME, so import home child routing rules;

{
    path: '/home'.component: Home,
    redirect: '/welcome'.children: [{path: '/welcome'.component: Welcome },
      { path: '/users'.component: User },
      { path: '/rights'.component: Rights }
    ]
  }
Copy the code

2. Then there is the layout of the page




Create () will render the page based on the lifecycle hook. For example, the generated () hook will render the page based on the generated () hook. For example, the generated () hook will render the page based on the generated () hook


data(){
    return {
      rightsList:[]
    }
  },
  created () {
    this.getRightsList()
  },
  methods: {
    async getRightsList () {
      const { data: res } = await this.$http.get('rights/list')
      if(res.meta.status ! = =200) {
        return this.$message.error('Failed to get permission list')}this.rightsList = res.data
    }
  }
Copy the code

3. Use element UI’s framed tables to display data fetched from the background

Add serial numbers 1, 2, 3… Type =”index”, and then use element UI’s Tag to beautify the permission level: in the permission level column you need to customize the form so you do it in slots

<el-table-column
      prop="level"
      label="Permission level">
      <template v-slot:default="slotProps">
        <el-tag v-if="slotProps.row.level==='0'">Level 1 label</el-tag>
        <el-tag type="success" v-if="slotProps.row.level==='1'">The secondary label</el-tag>
        <el-tag type="warning" v-if="slotProps.row.level==='2'">Level 3 labels</el-tag>
      </template>
    </el-table-column>
Copy the code

4. Create a user role list to display roles.vue

Elrow el-Col is a three-layer for loop matching grid system. When deleting role-children, update role-children to update role-children. role.children=res.data

5. Use the Tree control for Tree components

<el-tree :data="data" :props="defaultProps" 
  @node-click="handleNodeClick"></el-tree>
Copy the code
<el-tree
  :data="rightsList"
  :props="treeProps"
  show-checkbox
  node-key="id"
  default-expand-all
  :default-checked-keys="defKeys"
  ></el-tree>
  // Write in data
   rightsList: [],
      treeProps: {
        label: 'authName'.children: 'children'
      }
Copy the code

RightsList indicates the data, treeProps indicates which attribute to subclass, show-checkbox indicates the checkbox, default-expands-all indicates the default expand all, default-checked-keys indicates the default permission. DefKeys is an array containing the level 3 privilege ID. Use recursion to obtain this level 3 privilege ID. When closing the dialog box, you need to clear the defKeys array

 @click="showSetRightDialog(slotProps.row)"
 async showSetRightDialog (role) {
     ...
      this.getLeafKeys(role, this.defKeys)
    },
getLeafKeys (node, arr) {
      // If the node does not contain children, it is a three-level node
      if(! node.children) {return arr.push(node.id)
      }
      node.children.forEach((item) = > {
        return this.getLeafKeys(item, arr)
      })
    }
Copy the code

Use the element UI tree component’s method: getCheckedKeys getHalfCheckedKeys The latter gets the half-checked node

6. Submit code