vue tree封装一个可选的的树组件

组件实现的基本功能
1,根据后端返回的数据格式,传入组件动态的渲染出当前角色有哪些权限(新建,修改)
2,适配有2级和只有一级多选的数据
3,有全选(√) ,全不选 ,部分已选(-)的3装状态,每一级都支持(用的iview2次封装)
4,改变之后返回当前选中的所有权限的id,用于提交
5,手风琴效果,小屏适配

先看效果图
.
有部分权限没打开
vue tree封装一个可选的的树组件_第1张图片
打开
vue tree封装一个可选的的树组件_第2张图片
小屏
vue tree封装一个可选的的树组件_第3张图片
权限数据结构,select_status=1表示选中
vue tree封装一个可选的的树组件_第4张图片
默认添加没有权限的初始数据结构
vue tree封装一个可选的的树组件_第5张图片
有些数据只有一级子菜单,有些有两级

核心代码.vue





核心代码主要就是数据的处理,底级的更改都触发上一级的状态和值得改变

用的时候主要就是一个props传入数据, 一个方法返回给父组件选中的值


你可能感兴趣的:(项目实战,vue)