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 tree封装一个可选的树组件方式)