11.角色列表更新

1.更新回调方法

 2.对话框

2.1、角色名称

复制粘贴之前在权限列表中的对话框再进行修改

 2.2、角色权限

 我们不能用default-checked-keys，default是默认的意思。它就是第一次生效也就是说这个值一旦给定了之后它第一次会按照这个值去进行设置完之后，我再改变后面这个，我们即使把它做成一个ref动态绑定的数组，它也不会再变了，所以会导致el-tree永远选择的是同一个，不管你改成哪个角色它都会是这一个选定，因此我们不能用default-checked-keys。

在这里我们的处理方案应该用动态的方法去做，也就是需要给el-tree绑定一个ref，拿到我们el-tree的一个实例，它里面有实例直接设置我们相关的setCheckedKeys的方法，直接调用方法就可以了。

 treeRef.value是underfunded，所以读不到信息，那这是怎么回事，为什么treeRef.value是underfunded呢？这里的我们的ref是用在了一个弹出框el-dialog，el-dialog它的第一次特别懒，你给它false，dialogVisible它是没创建。所以等你点击第一次将它改为true的时候，它才开始创建出来了，以后再改成false就是隐藏，再改成true就是显示，所以你可以认为第一次是创建。创建又怎么呢？由于我们的el-dialog给它刚刚改成了true，那此时这个el-dialog节点还没有创建成功，紧接着就访问我们的 treeRef.value。我们的这个view的更新它是一个异步也就是对应的你将一个状态改成了true或者false，它是异步操作DOM更新节点的，你在这着急访问treeREF，它根本没有获取到真实的那个节点。

我们改完了状态想直接去获取当前的那个DOM节点中的内容，其实你会发现没有改变，有什么好方法呢？因为每次改变这个值true，我们都会走更新生命周期，更新生命周期是每个状态的改变都会调用。

nextTick监听方式 

接下来我们就肯定不会用更新生命周期，因为更新生命周期是每个状态的改变都会调用，多麻烦，我们就在这里只需要紧盯的就是我们需要是这个状态true更新完事之后我们什么时候DOM才上树了，什么时候我们的ref才绑定好了，有没有这样给我一次性的这样一个监听的方法？就是我们的一个nextTick方式。update的方式不行，每次更新都要调用。

 直接调用nextTick，它接收一个回调。nextTick的一个用法就是它会等待前面在这一个已经更新上树之后会执行一次，可以认为它是一次性的绑定一次性的监听，如果在其他的再更新的话我们的nextTick也不会去搭理了，只有一次事件循环的时候是有效的。

点击更新之后我们会看到在对应的这里我们已经拿到了这个节点，而我们明显会发现代码居然是先走 treeRef.value.setCheckedKeys(item.rights)，因为它先报错了，然后再执行的131行代码，所以很明显nextTick它执行的晚，它甚至晚到我们update生命周期都完事了它才会执行，而拿到value值的话，它就是tree对象，里面也包含了我们那些setCheckedKeys这样一些方法。所以说直接把treeRef.value.setCheckedKeys(item.rights)代码放在nextTick里面。

 

 但这里还有一个坑，我们先打印一下item.rights是什么。

我们会看到它打印出来会发现item.rights是一个JSON字符串里面是一个数组形式的，它不是一个数组，所以我们setCheckedKeys接收的要是一个数组，里面包含着我们要被选中的这些节点可能有10个20个，而对应的去匹配我们这个tree中的每一个节点，是对应上的就✔，所以要求传的是一个数组，它在这里还对数组进行一个遍历，如果不是数组遍历就报错。

2.1、使用setCheckedKeys方法

在这里唯一的方案就手动的转换一下，用JSON.parse解析成我们的一个数组，并且设置setCheckedKeys。

可以看到我们的页面渲染，它勾选的像好用又不像好用，说它不好用的吧它勾选到了，说它好用吧又没勾选正确。所以我们要加上check-strictly属性。

我们要把它们父子不相关联。

2.3、更新按钮

点击更新按钮我们就需要收集最新的角色名称，角色名称不用收集了，因为它其实已经双向数据绑定我们那个表单内容的。而对应的我们需要的是角色权限内容是什么，也就是我们改变了角色权限里面的内容比如勾了一个用户管理把里面的孩子也给勾选了，那最终我知道你够了哪一些呢，你是不是又得把它勾选的那一个数组给它提取出来再传给我们的后端，所以在这里这个怎么去做呢？我们就去实现对应的这个方法。

 定义方法

 4、后端

我们可以复制粘贴RightController中的再进行修改。