vue +elementUl实现展开和收起

https://blog.csdn.net/weixin_39089928/article/details/110073249

image.png

image.png

这里按钮需要写两个，一个在CheckBox group 里，一个在外面。。

  // 通过高度判断是否需要折叠，但不好控制折叠按钮的位置（flex）
        const showAll = ref(true);
        const searchBoxRef = ref();

        const closeSearch = (): void => {
            showAll.value = !showAll.value;
            if (!showAll.value) {
                searchBoxRef.value.style.height = 36 + 'px';
            } else {
                searchBoxRef.value.style.height = 'auto';
            }
        };

      
                            {{ showAll :'fold':'more' }}
                            
                                
                            
                        

.more-btn {
    cursor: pointer;
}
.searchBox {
    overflow: hidden;
}
.fold {
    display: inline-block;
    transform: rotate(-180deg);
}