element ui菜单栏的折叠与展开(element 侧边栏折叠)

本文中的element-ui版本是2.13.0。
在Element- UI中，树数据表有一个属性default-expand-all，它控制树数据的展开和折叠。但是，如果我们使用按钮来动态改变这个属性，它没有任何作用，因为它只在表第一次初始化时有效。
展开的项目图标
未开发的项目图标
通过对页面的观察，我们发现通过点击p.el-table__expand-icon元素，可以控制Element- UI中的表格展开和折叠，展开时会在元素中添加一个新的class-table _ _ expand-icon-expanded。由此，我们可以整理出解决方案：
1.单击全部展开获取所有p.el-table__expand-icon元素，不包含类el-table _ _ expand-icon-expanded，向步骤1中获取的元素添加一个Click事件/*展开所有按钮click方法*/to Expand All(){ constels=document . getelementsbyclassname(‘ El-table _ _ Expand-icon ‘)if(this . list . length！==0 els.length！==0) {//为所有展开的图标添加标记(设J1=0；j1 els.lengthJ1){ els[J1]. class list . add(‘ click item ‘)} if(this。$ El . getelementsbyclassname(‘ El-table _ _ expand-icon-expanded ‘){ const open=this。$ El . getelementsbyclassname(‘ El-table _ _ expand-icon-expanded ‘)//删除图标已展开的标记(让j=0；j open.lengthj){打开[j]。class list . remove(‘ click item ‘)} const click item=this。$ El . getelementsbyclassname(‘ click item ‘)//为所有未展开的图标添加一个单击事件(设a=0；a click item . length；A) {ClickItem [a]。点击()}}}二。单击Collapse All以获取所有具有El-table _ _ expand-icon-expanded类的p.el-table__expand-icon元素，并将Click事件添加到步骤1/* Collapse All button click methods */to close(){==0){ const els open=this。$ El . getelementsbyclassname(‘ El-table _ _ expand-icon-expanded ‘)If(this。$ El . getelementsbyclassname(‘ El-table _ _ expand-icon-expanded ‘){//为所有展开的图标添加一个单击事件(设I=0；i elsopen.lengthI) {elsopen [i]。Click ()}}}展开时单击全部展开，我们也可以在p.el-table__expand-icon元素中去掉el-table _ _ expand-icon-expanded类，然后在所有p.el-table__expand-icon元素中添加Click事件。