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';
            }
        };

      <el-button type="text" class="showAll" @click="closeSearch" v-if="showAll">
                            {{ showAll :'fold':'more' }}
                            <span class="fold">
                                <i class="iconfont down" style="margin-right: 4px"></i>
                            </span>
                        </ks-button>

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