uniapp 多级列表展开选择组件

1、多级列表
2、展开缩起
3、效果图

截屏2021-07-06 下午1.53.51.png

代码如下：

<template>
    <view class="content">
        <checkbox-group @change="checkboxChange">
            <scroll-view class="position-group" :style="getHeight()">
                <!-- 一级循环 -->
                <view class="pronames_one" v-for="(item, index) in positionlist" :key="index"
                    :class="item.curSelect?'oneshow':'onehide'">
                    <view class="pronames-one-label" @click="onelist(index)">
                        <view class="item-v">
                            <view v-if="getHasChildren(item[defaultKey.children])"
                                :class="item.curSelect?'iconfont icon-jian icon-v':'iconfont icon-ziyuan icon-v'">
                            </view>
                            <text>{{getTitle(item)}}</text>
                            <label :class="item.curSelect?'cuIcon-fold':'cuIcon-unfold'"></label>
                        </view>
                        <checkbox class="t-v" v-if='getShowCheckbox(item)' :value="getItem(item)"
                            :checked="item.curSelect" style="transform:scale(0.85)" />
                    </view>
                    <!-- 二级循环 -->
                    <view class="pronames_two" v-for="(item2, index2) in item[defaultKey.children]" :key="index2"
                        :class="item2.curSelect?'twoshow':'twohide'">
                        <view class="pronames-two-label" @click="twolist(index,index2)">
                            <view class="item-v">
                                <view v-if="getHasChildren(item2[defaultKey.children])"
                                    :class="item2.curSelect?'iconfont icon-jian icon-v':'iconfont icon-ziyuan icon-v'">
                                </view>
                                <text>{{getTitle(item2)}}</text>
                                <label :class="item2.curSelect?'cuIcon-fold':'cuIcon-unfold'"></label>
                            </view>
                            <checkbox class="t-v" v-if='getShowCheckbox(item2)' :value="getItem(item2)"
                                :checked="item2.curSelect" style="transform:scale(0.85)" />
                        </view>
                        <!-- 三级循环 -->
                        <view class="pronames_three" v-for="(item3, index3) in item2[defaultKey.children]" :key="index3"
                            :class="item3.curSelect?'threeshow':'threehide'">
                            <view class="pronames_three-label" @click="threelist(index,index2, index3)">
                                <view class="item-v">
                                    <view v-if="getHasChildren(item3[defaultKey.children])"
                                        :class="item3.curSelect?'iconfont icon-jian icon-v':'iconfont icon-ziyuan icon-v'">
                                    </view>
                                    <text>{{getTitle(item3)}}</text>
                                    <label :class="item3.curSelect?'cuIcon-fold':'cuIcon-unfold'"></label>
                                </view>
                                <checkbox class="t-v" v-if='getShowCheckbox(item3)' :value="getItem(item3)"
                                    :checked="item3.curSelect" style="transform:scale(0.85)" />
                            </view>
                            <view class="pronames_four" v-for="(item4, index4) in item3[defaultKey.children]"
                                :key="index4">
                                <!-- 4级循环 -->
                                <view class="pronames_four-label" @click="fourListClick(index,index2, index3, index4)">
                                    <view class="item-v">
                                        <text>{{getTitle(item4)}}</text>
                                        <label :class="positionSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label>
                                    </view>
                                    <checkbox class="t-v" :value="getItem(item4)" :checked="item4.curSelect"
                                        style="transform:scale(0.85)" />
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </checkbox-group>
        <view class="bottom-v">
            <button type="default" class="debtn-v" @click.stop="deleteBtn(positionlist)">清空</button>
            <button type="primary" class="btn-v" @click.stop="surekBtn()">确定</button>
        </view>
    </view>
</template>
<script>
    export default {
        props: {
            positionlist: {
                type: Array,
                default () {
                    return []
                }
            },
            keyProps: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                positionSele: true,
                defaultKey: {
                    title: 'title',
                    value: 'id',
                    children: 'children'
                },
                selectList: []
            }
        },
        mounted() {
            for (let key in this.keyProps) {
                this.defaultKey[key] = this.keyProps[key]
            }
        },
        computed: {
            getItem() {
                return function(data) {
                    return JSON.stringify(data)
                }
            },
            getHeight() {
                return function() {
                    const systemInfo = uni.getSystemInfoSync()
                    let h = systemInfo.windowHeight - uni.upx2px(120)
                    return {
                        height: h
                    }
                }
            },
            getTitle() {
                return function(item) {
                    
                    return item[this.defaultKey.title]
                }
            },
            getShowCheckbox() {
                return function(item) {
                    let chlidren = item[this.defaultKey.children]
                    if (chlidren && chlidren.length == 0) {
                        return true
                    }
                }
            },
            getHasChildren() {
                return function(data) {
                    if (data && data.length > 0) {
                        return true
                    }
                    return false
                }
            },
        },
        methods: {
            checkboxChange(e) {
                
            },
            deleteBtn(dataList) {
                for (let i = 0; i < dataList.length; i++) {
                    let data = dataList[I]
                    let children = data[this.defaultKey.children]
                    data.curSelect = false
                    if (children&&children.length > 0) {
                        this.deleteBtn(children)
                    }
                }
            },
            findSelect(dataList) {
                for (let i = 0; i < dataList.length; i++) {
                    let data = dataList[I]
                    let children = data[this.defaultKey.children]
                    if (data.curSelect && (!children || children.length == 0)) {
                        this.selectList.push(data)
                    }
                    else if (children&&children.length > 0) {
                        this.findSelect(children)
                    }
                }
            },
            surekBtn() {
                this.selectList = []
                this.findSelect(this.positionlist)
                // console.log('selectList', this.selectList)
                this.$emit('selectEnd', this.selectList, this.positionlist)
                // console.log('positionlist', this.positionlist)
            },

            onelist(index) {
                let positionlist = this.positionlist;
                if (!positionlist[index]['curSelect']) {
                    positionlist[index]['curSelect'] = true;
                } else {
                    positionlist[index]['curSelect'] = false;
                }
            },

            twolist(index, index2) {

                let children = this.positionlist[index][this.defaultKey.children][index2]
                let select = children['curSelect']
                if (!select) {
                    children['curSelect'] = true;
                } else {
                    children['curSelect'] = false;
                }
            },
            threelist(index, index2, index3) {
                let children = this.positionlist[index][this.defaultKey.children][index2][this.defaultKey.children][index3]
                let select = children['curSelect']
                if (!select) {
                    children['curSelect'] = true;
                } else {
                    children['curSelect'] = false;
                }
            },
            fourListClick(index, index2, index3, index4) {
                let children = this.positionlist[index][this.defaultKey.children][index2][this.defaultKey.children][index3]
                    [this.defaultKey.children][index4]
                let select = children['curSelect']
                if (!select) {
                    children['curSelect'] = true;
                } else {
                    children['curSelect'] = false;
                }
            }
        }
    }
</script>

<style>
    page {
        background: #fff;
    }

    .position-group {
        width: 100%;
        height: auto;
    }

    .icon-v {
        padding: 0 10rpx 0 0rpx;
        color: #F05B38;
    }

    .item-v {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .bottom-v {
        background-color: #FFFFFF;
        height: 100rpx;
        border-top: 2rpx solid #E5E5E5;
        position: fixed;
        bottom: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }
    .debtn-v {
        width: 160rpx;
        line-height: 80rpx;
        font-size: 26rpx;
    }
    .btn-v {
        width: 60%;
        line-height: 80rpx;
        font-size: 26rpx;
    }

    /* 一级 */
    .pronames_one {
        width: 100%;
        height: auto;
    }

    .pronames-one-label {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        background: #fff;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 20rpx;
        border-bottom: 1px #eaeaea solid;
    }

    .pronames-one-label text {
        font-size: 30rpx;
        color: #2ebbfe;
        color: #333333;
    }

    .pronames-one-label label {
        color: #aaa;
        font-size: 40rpx;
        transition: all 0.5s;
    }

    /* 二级 */
    .pronames_two {
        width: 100%;
        height: auto;
        transition: all 0.5s;
    }

    .pronames-two-label {
        margin-left: 40rpx;
        width: calc(100% - 40rpx);
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        justify-content: space-between;
        padding: 0 10rpx;
        border-bottom: 1px #eee solid;
    }

    .pronames-two-label text {
        font-size: 28rpx;
        color: #666666;
        /* margin-left: 40rpx; */
    }

    .pronames-two-label label {
        color: #aaa;
        font-size: 20px;
        transition: all 0.5s;
    }

    /* 三级 */
    .pronames_three {
        width: 100%;
        height: auto;
        transition: all 0.5s;
    }

    .pronames_three-label {
        margin-left: 80rpx;
        width: calc(100% - 80rpx);
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 10rpx;
        border-bottom: 1px #eee solid;
    }

    .pronames_three-label text {
        font-size: 26rpx;
        color: #666666;
        /* margin-left: 80rpx; */
    }

    .pronames_three-label label {
        color: #aaa;
        font-size: 20px;
        transition: all 0.5s;
    }

    /* .pronames_three-label label {
        height: 90rpx;
        line-height: 90rpx;
        display: block;
        color: #D5D5D5;
        font-size: 20px;
    } */

    /* 三级 */
    .pronames_four {
        width: 100%;
        height: auto;
    }

    .pronames_four-label {
        margin-left: 120rpx;
        width: calc(100% - 120rpx);
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 10rpx;
        border-bottom: 1px #eee solid;
        /* background-color: #007AFF; */
    }

    .pronames_four-label label {
        /* width: 100%; */
        height: 90rpx;
        line-height: 90rpx;
        display: block;
        color: #D5D5D5;
        font-size: 20px;
    }

    .pronames_four-label text {
        /* width: 100%; */
        font-size: 26rpx;
        color: #666666;
        /* margin-left: 80rpx; */
        /* background-color: #007AFF; */
    }

    /* 展开收起效果 start */

    .oneshow {}

    .oneshow .pronames_two {
        display: block;
    }

    .onehide {}

    .onehide .pronames_two {
        display: none;
    }

    /* 展开收起效果 end */


    .twoshow {}

    .twoshow .pronames_three {
        display: block;
    }

    .twohide {}

    .twohide .pronames_three {
        display: none;
    }

    .threeshow {}

    .threeshow .pronames_four {
        display: block;
    }

    .threehide {}

    .threehide .pronames_four {
        display: none;
    }
</style>