2、折叠面板内容的动态生成【全选按钮,CheckBox组】,相互不冲突。通过positionID:XXX这种数据格式存放数据,XXX为CheckBox的数据;
3、控制其中一个折叠面板有数据选中时,其他面板进行折叠不可用;无选中数据时,所有面板展开可用;这里点击单个CheckBox的时候或者全选按钮的时候动态开始匹配,获取当前操作面板的positionID,如果有选中数据就将其他的折叠设为不可用,若无选中则将所有面板设为展示可用;
4、全选按钮,设置三个状态,全选、取消全选、未选中,不同状态对应不同的图标,点击操作时开始进行图标以及相应功能的切换,点击单个checkbox时,获取当前选中的组进行匹配,更新全选按钮的状态。
1、CheckBox的key值设置为key-positionID,保证每次click或者change都能找到当前操作的面板,保证唯一性,保存时再通过split('-')进行处理;
2、通过positionID的唯一性,标识不同面板关联的数据;
在element-ui中采用NavMenu导航菜单作为系统菜单的实现。
官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse,是一个 bollean 类型,用于控制是否水平折叠菜单。
我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。
解决方案
1.实现一个按钮,
2.在data中定义一个数据collapse
3.实现方法toggleCollapse
4.在el-menu中动态绑定属性值collapse
问题:在左侧菜单的展开与折叠中,文本和图标折叠了,但是菜单的长度并没有折叠,发现原因是菜单的长度给了一个固定的值,而实际上我们需要动态给定长度。如果菜单是展开的,长度是等于文本的长度+图标的长度。如果菜单是折叠的,长度是等于图标的长度。我们可以根据isCollapse的值进行判断,通过它的值为true或者是false,来给定不同的长度: