Element-UI 进入页面手风琴就全部展开，无需挨个点击展开

想要的页面效果是如图，进入该页面时手风琴就已经全部展开，而不需要使用鼠标挨个点击每个面板。使用的前端框架时VUE.

核心的html代码如下：

    


        
            
                
{{ o.groupname }}
                

                    

                        
{{ co.dept }}
                        

                            总{{ co.total }}
                            年{{ co.lastyear }}
                        
                    
                
            
        

    

以上代码包含了具名插槽知识点，将slot的名字与在el-collapse-item中的title属性相绑定，插槽的内容会根据title名字的不同而自动替换成相应的内容。代码片段

{{o.groupname}}

与代码片段

 

       {{o.groupname}}
 

的效果完全一样，只是写法不同而已。

核心的JS代码如下：

 computed: {
            opened() {
                return this.groups.map((g) => {
                    return g.groupname;
                });
            }
        }

element-ui官网中，手风琴效果的实现是在el-collapse中绑定在data中定义的activeNames数组变量，并同时将每一个面板的el-collapse-item绑定一个唯一的name属性。鼠标挨个点击每个面板后则有全部展开的效果，原理就是将每个小面板的name属性的值放入了activeNames数组中。

而上面的方法完成打开页面就出现面板全部展示的功能，则使用了Vue中computed计算属性。el-collapse 绑定的是属性opened()方法，el-collapse-item绑定的是对象O的groupname属性。在执行opened()方法时，所有唯一的groupname属性都返回给opened属性了。

完整代码地址：https://github.com/yushifang/demo.git