vue带样式的三级分类
(可以折叠和展开所有,添加子类,编辑分类,删除分类)
项目引用的element ui样式,不需要可以改掉标签
删除,添加,编辑可以自己替换成字体图标

<!-- 分类列表 -->
<template>
    <div class="ccia">
        <div class="ccia_top">
            <el-row>
                <el-col :span="12">
                    <div>
                        <!-- <el-button class="bgFFC" >设置分类层级</el-button> -->
                        <el-button class="closeAll" @click="closeall"><i :class="allexpanded==false?'el-icon-arrow-down':'el-icon-arrow-up'"></i>{{allexpanded==false?'折叠所有':'展开所有'}}</el-button>
                        <span>
                            <el-button> <i class="el-icon-plus"></i> 添加新分类</el-button>
                        </span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="contents">
            <div class="tree">
                <ul v-for='item in menulist' :key="item.id">
                    <!-- 没有子集 -->
                    <li v-if='!item.children'>
                        <div class="treeItem">
                            <div class="lileft marginL10"> [ ID: {{item.id}}] {{item.catename}}</div>
                            <div class="liright" v-if="usertype==1">
                                <span :class="item.enabled == '1'?'bgYes':'bgNo'" @click.stop="toggleenabled(item)">{{item.enabled==1?'启用':'禁用'}}</span>
                                    <span @click.stop="addnew(item)" class="itemClass">添加</span>
                                    <span class="itemClass" @click.stop="showEDdi(item)">编辑</span>
                                    <span @click.stop="delself(item)" class="itemClass">删除</span>
                            </div>
                        </div>
                    </li>
                    <!-- 有子集 -->
                    <li v-if='item.children'>
                        <div class="onechild treeItem">
                            <div class="lileft"><span @click.stop='toggleChildren(item)'>{{item.expanded?'- ':'+ '}} </span>[ ID: {{item.id}}] {{item.catename}}</div>
                            <div class="liright" v-if="usertype==1">
                                <span :class="item.enabled == '1'?'bgYes':'bgNo'" @click.stop="toggleenabled(item)">{{item.enabled==1?'启用':'禁用'}}</span>
                                    <span @click.stop="addnew(item)" class="itemClass">添加</span>
                                    <span class="itemClass" @click.stop="showEDdi(item)">编辑</span>
                                    <span @click.stop="delself(item)" class="itemClass">删除</span>
                            </div>
                        </div>
                        <ul v-show='item.expanded' class="childs">
                            <li v-for='child in item.children' :key="child.id">
                                <!-- 没有子集 -->
                                <div class="twochild treeItem marginL60" v-if="!child.children">
                                    <div class="lileft marginL10">[ ID: {{child.id}}] {{child.catename}}</div>
                                    <div class="liright" v-if="usertype==1">
                                        <span :class="child.enabled == '1'?'bgYes':'bgNo'" @click.stop="toggleenabled(child)">{{child.enabled==1?'启用':'禁用'}}</span>
                                            <span @click.stop="addnew(child)" class="itemClass">新增</span>
                                            <span class="itemClass" @click.stop="showEDdi(child)">编辑</span>
                                            <span @click.stop="delself(child)" class="itemClass">删除</span>
                                    </div>
                                </div>
                                <!-- 有子集 -->
                                <div class="twochild marginL60" v-if="child.children">
                                    <div class="treeItem">
                                        <div class="lileft"><span @click='toggleChildren(child)'>{{child.expanded?'- ':'+ '}}</span> [ ID: {{child.id}}] {{child.catename}}</div>
                                        <div class="liright" v-if="usertype==1">
                                            <span :class="child.enabled == '1'?'bgYes':'bgNo'" @click.stop="toggleenabled(child)">{{child.enabled==1?'启用':'禁用'}}</span>
                                                <span @click.stop="addnew(child)" class="itemClass">新增</span>
                                                <span class="itemClass" @click.stop="showEDdi(child)">编辑</span>
                                                <span @click.stop="delself(child)" class="itemClass">删除</span>
                                        </div>
                                    </div>

                                    <ul v-show='child.expanded'>
                                        <!-- 遍历第三层 -->
                                        <li class="threechild " v-for="child1 in child.children" :key="child1.id">
                                            <div class="treeItem marginL60">
                                                <div class="lileft marginL10"> [ ID: {{child1.id}}] {{child1.catename}}</div>
                                                <div class="liright" v-if="usertype==1">
                                                    <span :class="child1.enabled == '1'?'bgYes':'bgNo'" @click.stop="toggleenabled(child1)">{{child1.enabled==1?'启用':'禁用'}}</span>
                                                        <span class="itemClass" @click.stop="showEDdi(child)">编辑</span> 
                                                        <span class="itemClass" @click.stop="delself(child1)">删除</span>                               
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            allexpanded: true, //展开、折叠所有
            menulist:[{
                catename:'水果',
                expanded:false,
                enabled:true,
                children:[{
                    catename:'苹果',
                    enabled:true,
                    },{
                    catename:'荔枝',
                    enabled:true,
                    },{
                    catename:'葡萄',
                    enabled:true,
                    },{
                    catename:'火龙果',
                    expanded:false,
                    enabled:true,
                    children:[
                        {
                        catename:'白心',
                        enabled:true,
                        },{
                        catename:'红心',
                        enabled:true,
                        },
                    ]
                }]
            }],
            bmplist: [],
            usertype: 1,
        };
    },
    methods: {
        getlist() {
                    let that = this;
                    for (let i = 0; i < that.menulist.length; i++) {
                        // console.log(that.menulist[i])
                        that.$set(that.menulist[i], "expanded", false);
                        if (that.menulist[i].children) {
                            // console.log('有子集')
                            // console.log(that.menulist[i]._child.length)
                            for (
                                let j = 0;
                                j < that.menulist[i].children.length;
                                j++
                            ) {
                                //    console.log(that.menulist[i]._child[j])
                                that.$set(
                                    that.menulist[i].children[j],
                                    "expanded",
                                    false
                                );
                                if (that.menulist[i].children[j].children) {
                                    // console.log('还有子集')
                                    for (
                                        let z = 0;
                                        z <
                                        that.menulist[i].children[j].children
                                            .length;
                                        z++
                                    ) {
                                        that.$set(
                                            that.menulist[i].children[j]
                                                .children[z],
                                            "expanded",
                                            false
                                        );
                                    }
                                }
                            }
                        }
                    }
                    // 还原上一次展开的情况
                    if (this.bmplist.length !== 0) {
                        // console.log('展开过')
                        for (let i = 0; i < this.menulist.length; i++) {
                            this.menulist[i].expanded = this.bmplist[
                                i
                            ].expanded;
                            if (this.menulist[i].children) {
                                for (
                                    let j = 0;
                                    j < this.menulist[i].children.length;
                                    j++
                                ) {
                                    this.menulist[i].children[
                                        j
                                    ].expanded = this.bmplist[i].children[
                                        j
                                    ].expanded;
                                }
                            }
                        }
                    }
        },
        // 折叠所有
        closeall() {
            this.allexpanded = !this.allexpanded;
            let that = this;
            if (this.allexpanded) {
                for (let i = 0; i < that.menulist.length; i++) {
                    that.$set(that.menulist[i], "expanded", false);
                    if (that.menulist[i].children) {
                        // console.log('有子集')
                        // console.log(that.menulist[i]._child.length)
                        for (
                            let j = 0;
                            j < that.menulist[i].children.length;
                            j++
                        ) {
                            //    console.log(that.menulist[i]._child[j])
                            that.$set(
                                that.menulist[i].children[j],
                                "expanded",
                                false
                            );
                            if (that.menulist[i].children[j].children) {
                                // console.log('还有子集')
                                for (
                                    let z = 0;
                                    z <
                                    that.menulist[i].children[j].children
                                        .length;
                                    z++
                                ) {
                                    that.$set(
                                        that.menulist[i].children[j].children[
                                            z
                                        ],
                                        "expanded",
                                        false
                                    );
                                }
                            }
                        }
                    }
                }
            } else {
                for (let i = 0; i < that.menulist.length; i++) {
                    that.$set(that.menulist[i], "expanded", true);
                    if (that.menulist[i].children) {
                        // console.log('有子集')
                        // console.log(that.menulist[i]._child.length)
                        for (
                            let j = 0;
                            j < that.menulist[i].children.length;
                            j++
                        ) {
                            //    console.log(that.menulist[i]._child[j])
                            that.$set(
                                that.menulist[i].children[j],
                                "expanded",
                                true
                            );
                            if (that.menulist[i].children[j].children) {
                                // console.log('还有子集')
                                for (
                                    let z = 0;
                                    z <
                                    that.menulist[i].children[j].children
                                        .length;
                                    z++
                                ) {
                                    that.$set(
                                        that.menulist[i].children[j].children[
                                            z
                                        ],
                                        "expanded",
                                        true
                                    );
                                }
                            }
                        }
                    }
                }
            }
        },
        // 点击删除
        delself(item) {
            // console.log('del',item)
            // this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
            //     confirmButtonText: "确定",
            //     cancelButtonText: "取消",
            //     type: "warning"
            // })
            //     .then(() => {
            //         this.$http
            //             .post(this.api + "/admin/goodscate/delgoodscate", {
            //                 id: item.id
            //             })
            //             .then(res => {
            //                 // console.log(res);
            //                 if (res.data.status == 1) {
            //                     this.$message.success(res.data.message);
            //                     this.getlist();
            //                 } else {
            //                     this.$message.error(res.data.message);
            //                 }
            //             });
            //     })
            //     .catch(() => {
            //         this.$message({
            //             type: "info",
            //             message: "已取消删除"
            //         });
            //     });
        },
        // 点击添加
        addnew(clickitem) {
            // console.log(clickitem, "点击项");
            // this.$router.push('/addNewClass')
            this.$router.push({
                name: "addNewClass",
                query: { pid: clickitem.id }
            });
        },

        // 编辑分类
        showEDdi(clickitem) {
            // console.log(clickitem);
            // this.edidialog = !this.edidialog
            // this.ediForm = clickitem
            // console.log(this.ediForm)
            this.$router.push("/ediNewClass/" + clickitem.id);
        },
        toggleChildren: function(item) {
            // console.log(item,'点击项')
            item.expanded = !item.expanded;
            this.bmplist = this.menulist;
            // console.log("bmplist", this.bmplist);
        },
        // 切换启用状态

        toggleenabled(row) {
            // console.log(row);
            // row.enabled==0?1:0
            let enabled;
            if (row.enabled == 1) {
                enabled = 0;
            } else if (row.enabled == 0) {
                enabled = 1;
            }
            // this.$http
            //     .post(this.api + "/admin/goodscate/change_enabled", {
            //         id: row.id,
            //         enabled: enabled
            //     })
            //     .then(res => {
            //         if (res.data.status == 1) {
            //             this.$message.success(res.data.message);
            //             this.getlist();
            //         } else {
            //             this.$message.error(res.data.message);
            //         }
            //     });
        }
    },
    created() {
        this.getlist();
    }
};
</script>


<style lang="less" scoped>
// @import "../../../common/less/app";
.marginL60 {
    margin-left: 60px;
}
.marginL10 {
    margin-left: 10px;
}
.ccia {
    border-radius: 2px;
    // border: 1px solid red;
    // padding: 0px 30px;
    overflow: hidden;
    .ccia_top {
        padding-right: 18px;
        padding-left: 15px;
        // padding: 0 15px;
        // height: 69px;
        // background-color: pink;
        // padding: 9px 18px 11px 15px;
        box-sizing: border-box;
        /deep/ .el-button {
            background-color: #28b7a3;
            color: #feffff;
            cursor: pointer;
            font-size: 12px;
            width: 88px;
            height: 32px;
            padding: 0;
        }
        .bgFFC {
            background-color: #ffc000;
            color: #ffffff;
        }
        .closeAll {
            background-color: #f0f0f0;
            color: #555555;
            border: 1px solid rgba(240, 240, 240, 1);
        }
        .top_right {
            /deep/ .el-input--suffix {
                width: 170px;
                border-right: 1px solid #edecec;
                height: 32px;
            }
            /deep/ .el-input {
                height: 32px;
            }

            .marginR30 {
                margin-right: 30px;
            }
        }
    }
}
.classfoot {
    padding-left: 15px;
}

.tree {
    width: 860px;
    margin-bottom: 16px;
    margin-left: 15px;
    ul {
        list-style: none;
    }
    li {
        margin: 10px 0;
        color: #6a6f7d;
        .treeItem {
            //  第一级
            display: flex;
            justify-content: space-between;
            min-height: 28px;
            line-height: 28px;
            font-size: 14px;
            border: 1px solid #e8e8e8;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            padding-right: 10px;
            &:hover {
                .lileft {
                    font-weight: bold;
                    color: rgba(0, 0, 0, 1);
                }
            }
        }
    }
    .lileft {
        span {
            padding-left: 10px;
            width: 25px;
            display: inline-block;
        }
    }
    .liright {
        // 右边显示
        float: right;
        img {
            width: 36px;
            height: 36px;
            vertical-align: middle;
        }
        span {
            color: #a4a3a3;
            font-size: 12px;
            padding: 3px 8px;
            // padding: 13px;
            // margin-right: 10px;
        }
        .bgYes {
            background: #28b7a3;
            color: #fff;
            cursor: pointer;
        }
        .bgNo {
            background: #b3b3b3;
            color: #000;
            cursor: pointer;
        }
        .itemClass {
            // display: inline-block;
            width: 22px;
            height: 22px;
            border-radius: 2px;
            border: 1px solid #eff0f0;
            // border: 1px solid red;
            text-align: center;
            cursor: pointer;
            i {
                line-height: 22px;
                font-size: 13px;
            }
        }
        .itemClass:hover {
            border: 1px solid #28b7a3;
            i:hover {
                color: #28b7a3;
            }
        }
    }
}
</style>