1. Copy and paste the table required to modify the permission list
2. Use elementplus components
When the mouse is moved into the role administrator, all the permissions of the current administrator need to be marked in red.
2.1. Popbver pop-up box
2.2. Change the content of the pop-up box
2.3. Tree tree control
What is the data in that form? It means that the current item can be expanded, because it has a children field, and the words in it are displayed accordingly. If there are more children, it will automatically expand according to the tree structure.
We can see that the structure is displayed, but the content is not. Because the data requires the label field, but we don't have the title field. The two fields are different, so the data cannot be read.
Solution: Use the propos attribute. It contains the label field that we will definitely read in the future. But if we don’t have it, we can tell it that we don’t have the label field and what fields we have, so we can specify defaultProps to read other fields. .
Expand all nodes by default
2.4. Customize renderContent node callback function
When we move the mouse in, we should get the rights array of the current row to judge whether the current row is the administrator. When I move the mouse to the teacher, I get the rights array of the identity of the teacher to judge whether I should set a red background.
2.5. Save rights value
The next thing we have to do is to assign a value to this rights and save it, because after all, this is a formal parameter. Your future judgment should be made in the callback of this function, so we need to create a new array of the current item of currentRights. We use a ref binding. Here we record our content and assign it. Our rights.
2.6. Determine whether to add active
Because we added scoped later, we need to add a deep. The result is the same as the original login.
