vue手写三级分类带样式,可折叠和展开全部

最新推荐文章于 2023-09-02 15:19:13 发布
最新推荐文章于 2023-09-02 15:19:13 发布
阅读量2.7k 收藏 4
点赞数 2
分类专栏： vue 文章标签： vue三级分类带样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43056561/article/details/86155199
版权

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>
urnotlynley
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3 - 实现任意内容展开 / 收起功能组件插件，点击查看更多内容控制段落文字展开折叠效果，支持自定义多少行隐藏、展开折叠按钮自定义位置、自动计算展开和收起功能、插槽 slot 形式自定义各种样式
王佳斌
09-13 4284
vue3展开收起折叠插件组件详细教程，vue3展开收起功能，vue3中实现点击收起和展开效果功能，vue3多行文本展开收起组件，vue3容器div如何点击展开和折叠收起，vue3中实现展开收起操作,动态改变元素高度，vue3怎么实现点击展开点击收起效果，vue怎么让div内容少时显示展开内容多时显示折叠，内容展开收起Vue3组件插件，vue3实现任意内容展开收起功能组件，vue3实现超过固定高度后出现展开折叠按钮，控制多行文字展开收起示例，vue3中文本内容超出规定行数后展开收起，vue3内容展开收起动画过
vue-路由精讲 二级路由和三级路由的作用
10-14
主要介绍了vue-路由精讲 二级路由和三级路由的作用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3、Element-Plus，el-menu，Collapse折叠展开动画显示。组件与组件之间传参
jso_cc的博客
08-03 9095
这个插件不能直接使用必须暴露出来才能使用，和element-plus差不多。我们写一个utils。在utils里面新建一个eventbus.ts，新建js的也是行的。首先我的head和menu是分开的2个组件，我的控制开关是放到head组件里面的。所以使用了组件之间相互传参的插件mitt，mitt插件的安装放文章最后。到这里就可以控制menu里面的collapse了，实现折叠展开。接收参数必须放到onMounted里面，使用mitt里面on命令获取head传送过来的值。鄙人新手，有写的不好的地方请包含。..
Vue 实现展开折叠效果的示例代码
10-18
主要介绍了Vue 实现展开折叠效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue多级复杂列表展开/折叠及全选/分组全选实现
12-09
首先，来看下效果图 在线体验地址：https://hxkj.vip/demo/multipleList/。温馨提示，打开之后按F12，使用手机模式食用，口味更佳！ 可以看出，这个列表有三种展现形式： 1.第一层级中包含直属子项和第二层级，其中第二层级里包含子项 2.第一层级中只包含第二层级，第二层级里包含子项 3.第一层级中只包含直属子项 接下来，再分析列表所实现的功能： 1.点击父级可以展开与折叠该直属子级； 2.点击父级级的勾选图标可以全选或取消该层级下列的所有子项； 3.点击子项达到该父级的全选状态时时，父级的勾选图标自动勾选；反之，没达到全选时，父级的勾选图标自动取消勾选；
Vue实战项目(六): 优化三级联动分类列表
summer_cloudy的博客
04-10 393
【代码】Vue实战项目(六): 优化三级联动分类列表。
IDEA展开所有类和收缩所有类
K_kzj_K的博客
01-31 2470
展开：Ctrl + shift + "+" 收缩：Ctrl + shift + "-"
Vue_shop学习97：商品分类页面数据编辑操作的实现
weixin_47295886的博客
05-05 606
获取到已将绑定的数据并显示。
uniapp中实现文字展开与折叠效果 - vue3
博客标题不能为空
03-24 1020
【代码】uniapp中实现文字展开与折叠效果 - vue3。
vue实现分类列表查询-搜索列表-组件封装
m0_64789556的博客
03-14 248
实现动态“展开”，取值自定义。
Vue三级地址联动（带已选地址）
06-17
使用Vue做的一个三级联动，带有已选地址展示删除等，选择过的地址背景色会发生变化，适用于初学者研究，主要是思维上的转变
vue.js实现三级菜单效果
10-16
主要为大家详细介绍了vue.js实现三级菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
点击展开全部
02-18
部分内容显示，部分隐藏，当点击展开全部内容后，控件往下挪显示所有内容，点击收起后恢复原位
Vue3+Element-Plus 实现左侧菜单折叠与展开功能 二七
热门推荐
码侬人生
12-10 1万+
1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来，画UI结构 1. 在侧边栏内部，在侧边栏菜单区域之前，放置一个DIV。 2. 在该DIV上面添加文本，然后通过点击该DIV，实现菜单折叠与展开功能 3.通过类选择器，为该DIV 添加相关样式 .toggle-button{ // 添加背景颜色 background-color: #4A5064; // 设置文本大小 font-size...
vue3和vue2分别对于tree的一键展开和折叠
最新发布
weixin_47194802的博客
09-02 563
一个 是 treeRef.value，一个 是this.$refs.treeRef。其中输入框和图片用了flex布局。点击按钮来控制数的展示折叠。
Vue3折叠面板（Collapse）
Mr Dear的博客
03-29 7140
整体样式功能与ant design保持一致，可以折叠/展开的内容区域。
前端Vue自定义简单好用商品分类列表组件 侧边栏商品分类组件
chenchuang0128的博客
06-22 2176
### 使用方法```使用方法-- data:商品列表数组[{navtitle:标题 shop:[] 展示列表}] @click:商品条目点击事件-->```#### HTML代码实现部分```html-- 自定义顶部搜索框 用于搜索跳转 skipUrl:跳转url为绝对路径 /pages开头 -->-- data:商品列表数组[{navtitle:标题 shop:展示列表}] @click:商品条目点击事件-->data() {
电商项目——商品服务-API-三级分类——第九章——上篇
qq_44891295的博客
10-12 1558
文章目录1：查询-递归树形结构获取数据2：配置网关路由与路径重写3：网关统一配置跨域4：查询-树形展示三级分类数据5：删除-页面效果6：删除-逻辑删除7：删除-删除效果细化 讲完了前面几章的内容，现在我们就可以对后台管理系统，和微服务项目进行开发了，我们先从三级分类说起 默认mall-product的环境已经全部配置好了 1：查询-递归树形结构获取数据 三级分类（电商里面经常用到的功能）：所有的数据都是来源于数据库，我们要对三级分类进行维护，进行增删改查，我们首先就必须要后台管理系统来可以维护我们的整个数
antd vue Menu三级菜单的展开会自动折叠怎么办
06-09
如果想要实现三级菜单展开不会自动折叠，可以考虑通过编写自定义的 Menu 组件来实现。 具体实现步骤如下： 1. 创建一个自定义的 Menu 组件，继承 Ant Design Vue 的 Menu 组件。 ```javascript import { Menu } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值