el-cascader 预览选中元素 删除预览元素el-cascader并回显

现在就简单的实现一下

 

cascader级联的v-model是拿的value不符合啊，用户可不知道这个id是谁的

然后直接获取实例使用ref获取组件实例this.$refs.cascderRef.checkedNodes根据这个就可以看到el-cascader组件已经帮我们存储了选中的属性

这样看来这个事情就变的简单了我们使用change事件的时候就可以获取这个数据，我们就可以拿着这个数据去进行页面渲染就可以看到每个部门中的人了

 

渲染实现了该实现删除了

当然啊实现删除的方式有很多这个里列举一个，

咱们可以看到$refs.cascderRef.checkedNodes里面的数据顺序和v-model的数据顺序是相同，看到这里相同、下标、删除、数组、是不是想到了

splice数组方法，就是这个数组方法就可以帮我实现删除，splice（下标，1），就可以实现删除。删除要同时删保存的数据和v-model数据这样数组数据才能做到统一🙋‍

 

但是现在又会遇到一个问题v-model数据确是删除了但是组件不会刷新还是选中状态，这个时候可以使用 :key  让el-cascader组件实现渲染

每次删除给 :key 的值 加1 值发生改变el-cascader组件会重新渲染 这个时候就已经实现了反显

功能到此结束

 

这里只是分享给大家一个解决思路实现的方法当然有很多。希望分享的这些帮助到大家