uni-app 树形列表ly-tree （多选）学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~ 如

学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~

效果图

Html部分

<uni-col :span="12">
    <uni-forms-item label="文稿类别" name="wglb" :label-width="72">
        <input type="text" disabled="true" class="inputStyle" ref='groupInput'
         @click="popOrganization" placeholder="请选择" :value='groupName'>
    </uni-forms-item>
    <view v-show="isShow" class="top_level">
        <scroll-view style="height: 200px;" class="ly_tree_style" :scroll-y="true">
                <ly-tree ref="tree" :treeData="treeData" v-if="ready"
                        nodeKey="id" @node-expand="handleNodeExpand" 
                        @node-click="handleNodeClick" :showCheckbox="true" :checkOnClickNode="true" :expandOnClickNode="false"
                        :defaultExpandAll="true" @check-change="handleCheck"
                        ></ly-tree>
        </scroll-view>
    </view>
</uni-col>

Js部分

<script>
import LyTree from '@/components/ly-tree/ly-tree.vue'
export default {
    components:{
        LyTree,
    },
    data() {
        return {
            treeData:[],
            ready: false,
            isShow: false,
            selectCondition: [],
            groups: [],
            groupName: "",
        }
    },
    methods: {
        // 获取文稿类别数据，我这里树状结构数据前端自己做了处理，大部分一般后台会给直接处理
        getfindItems() {
            ajax.get({
                    url: '/group/findItems',
                    data: {
                            code:"docCategory",
                            ver:"2023",
                    }
            }).then(res => {
                    let data = res.value || [];
                    // 第一种数据处理成想要的树状，不够严谨只适合两级，多层级不适用
                    this.treeData = [];
                    let flag = -1;
                    data.forEach((item) => {
                        let obj = {};
                        obj.id = item.icode;
                        obj.label = item.iname;
                        if (item.tier == 1) {
                            this.treeData.push(obj);
                            flag += 1;
                        }
                        if (item.tier == 2) {
                            if (this.treeData[flag].children instanceof Array) {
                                    this.treeData[flag].children.push(obj);
                            } else {
                                    this.treeData[flag].children = [];
                                    this.treeData[flag].children.push(obj);
                            }
                        }
                    });
                    this.ready = true;
                    
                    // 第二种数据处理成想要的树状数据---比较严谨可以多层级
                    let items = [], p = [];
                    p[0] = items;
                    data.forEach(v => {
                        let cs = v.tier || 1;
                        let r = { id: v.icode, label: v.iname, open: true, children: [] };
                        p[cs - 1].push(r);
                        p[cs] = r.children;
                    });
                    this.treeData = items;
            })
        },
        
        // 文稿类别点击事件
        popOrganization() {
            this.isShow = !this.isShow;
        },
        
        // 当树要展开时点击树形图左边的箭头调用
        handleNodeExpand(obj) {},
        
        // 点击树上的文件节点时调用
        handleNodeClick(obj) {},
        
        // 点击节点上的复选框和点击树文字都会调用
        handleCheck(obj) {
            this.getSelectData(obj.node);
        },
        
        getSelectData(obj) {
            if(obj.checked) {
                if(this.groups.indexOf(obj.data) != -1) {
                    // console.log('groups.contains')
                } else {
                    this.groups.push(obj.data);
                }
            } else {
                var index = this.groups.indexOf(obj.data);
                // console.log('groups.splice==='+index)
                if(index != -1) {
                    this.groups.splice(index,1);
                }
            }

            let groupParam = [];
            let groupNames = '';
            for(var i=0;i< this.groups.length; i++) {
                if(groupParam) {
                    groupParam.push(this.groups[i].id)
                } else {
                    groupParam = [this.groups[i].id];
                }
                if(groupNames) {
                    groupNames = groupNames+','+this.groups[i].label;
                } else {
                    groupNames = this.groups[i].label;
                }
            }

            this.selectCondition = groupParam;
            if(this.selectCondition.length !== 0) {
                this.formData.wglb = this.selectCondition;
            }else {
                this.formData.wglb = "";
            }
            this.groupName = groupNames;
        },
    }
}
</script>

Css部分

/* ly-tree style start*/
    .inputStyle {
            border: #bababa 0.5px solid; 
            width: auto;
            height: 37px; 
            box-sizing: border-box; 
            font-size: 14px; 
            color: rgb(51, 51, 51);
            padding-left: 10px;
            background-color: rgb(255, 255, 255);
            border: 1px solid #dcdfe6;
            border-radius: 4px;
    }
    .uni-input-placeholder {
            font-size: 12px;
            color: #999;
    }
    .top_level {
            position: fixed;
            z-index: 100;
    }
    .ly_tree_style {
            border: #F5F5F5 1px solid; 
            width: 169px;
    }
    /deep/.ly-tree {
            padding: 10px;
    }
    /deep/.ly-tree-node__label {
            font-size: 11px;
    }

ly-tree组件下载地址ext.dcloud.net.cn/plugin?id=1…

逻辑部分大家根据自己的业务需求去修改微调哈
最后感谢大家阅读⭐️⭐️⭐️，如果文章对你有帮助，喜欢可以点赞或留言哟💕💕💕

近期热门文章

专栏推荐

推荐一下自己的专栏，欢迎大家收藏关注😊~