vue组件递归使用

最新推荐文章于 2024-03-13 16:23:55 发布
最新推荐文章于 2024-03-13 16:23:55 发布
阅读量614 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qishuixian/article/details/90311609
版权

vue组件递归使用，废话少说直接看实列

1、效果

 

2、代码

2.1、父组件

<template>
    <div>

        <list-table
            @editFunction="editFunction"
            @addSubFunction="addSubFunction"
            :list="list">
        </list-table>

        <br><br><br>
    </div>
</template>

<script>
    import listTable from "./list-table.vue";
    export default {
        components: {
            listTable
        },
        data () {
            return {
                //表格数据
                list: [],
            }
        },
        computed: {
            dict () {
                return this.$store.state.dict.urlResourcesMange;
            }
        },
        methods: {
            //查询列表
            search (page) {
                var _this = this;

               var res = {
                   "total": 0,
                   "data": [{
                       "createdBy": "0",
                       "creationDate": "2017-03-24 18:36:06",
                       "lastUpdatedBy": "0",
                       "lastUpdateDate": "2018-04-09 19:42:45",
                       "resourceId": "7",
                       "systemCode": "tms",
                       "code": "jcsz",
                       "name": "基础设置",
                       "url": "",
                       "type": "menu",
                       "orderSort": 0,
                       "all": 0,
                       "menuRouterUrl": "",
                       "menuIcon": "",
                       "status": "enable",
                       "children": [{
                           "createdBy": "0",
                           "creationDate": "2017-03-24 18:37:41",
                           "lastUpdatedBy": "0",
                           "lastUpdateDate": "2019-03-22 16:12:27",
                           "resourceId": "8",
                           "systemCode": "tms",
                           "code": "jcsz-spgl",
                           "name": "商品管理",
                           "url": "/api/goods/list",
                           "type": "menu",
                           "orderSort": 2,
                           "all": 1,
                           "menuRouterUrl": "/goods/list",
                           "menuIcon": "",
                           "status": "enable",
                           "children": [{
                               "createdBy": "0",
                               "creationDate": "2017-03-24 18:39:02",
                               "lastUpdatedBy": "0",
                               "lastUpdateDate": "2018-08-08 17:27:01",
                               "resourceId": "9",
                               "systemCode": "tms",
                               "code": "jcsz-bj",
                               "name": "编辑",
                               "description": "编辑(商品管理)",
                               "url": "/api/goods/update/{goodsId}",
                               "type": "api",
                               "orderSort": 0,
                               "all": 0,
                               "menuRouterUrl": "",
                               "menuIcon": "",
                               "status": "enable",
                               "children": [{
                                   "createdBy": "0",
                                   "creationDate": "2017-03-24 18:39:02",
                                   "lastUpdatedBy": "0",
                                   "lastUpdateDate": "2018-08-08 17:27:01",
                                   "resourceId": "9",
                                   "systemCode": "tms",
                                   "code": "jcsz-bj",
                                   "name": "编辑",
                                   "description": "编辑(商品管理)",
                                   "url": "/api/goods/update/{goodsId}",
                                   "type": "api",
                                   "orderSort": 0,
                                   "all": 0,
                                   "menuRouterUrl": "",
                                   "menuIcon": "",
                                   "status": "enable",
                                   children: []
                               }],
                               "pid": "8"
                           }, {
                               "createdBy": "0",
                               "creationDate": "2017-03-24 18:39:57",
                               "lastUpdatedBy": "0",
                               "lastUpdateDate": "2018-07-04 09:56:04",
                               "resourceId": "10",
                               "systemCode": "tms",
                               "code": "jcsz-dr",
                               "name": "导入",
                               "description": "导入(商品管理)",
                               "url": "/api/goods/import",
                               "type": "api",
                               "orderSort": 0,
                               "all": 0,
                               "menuRouterUrl": "",
                               "menuIcon": "",
                               "status": "disable",
                               "children": [],
                               "pid": "8"
                           }, {
                               "createdBy": "0",
                               "creationDate": "2017-03-24 18:40:25",
                               "lastUpdatedBy": "0",
                               "lastUpdateDate": "2018-04-09 19:42:46",
                               "resourceId": "11",
                               "systemCode": "tms",
                               "code": "jcsz-dc",
                               "name": "导出",
                               "description": "导出(商品管理)",
                               "url": "/api/goods/export",
                               "type": "api",
                               "orderSort": 0,
                               "all": 0,
                               "menuRouterUrl": "",
                               "menuIcon": "",
                               "status": "enable",
                               "children": [],
                               "pid": "8"
                           }, {
                               "createdBy": "0",
                               "creationDate": "2018-03-21 17:59:05",
                               "lastUpdatedBy": "0",
                               "lastUpdateDate": "2018-04-09 19:43:24",
                               "resourceId": "1065",
                               "systemCode": "tms",
                               "code": "jcsz-spgl-szclx",
                               "name": "设置拆零箱",
                               "description": "设置拆零箱(基础设置-商品管理)",
                               "url": "/api/tms/box/insertOrUpdate",
                               "type": "api",
                               "orderSort": 0,
                               "all": 0,
                               "menuRouterUrl": "",
                               "menuIcon": "",
                               "status": "enable",
                               "children": [],
                               "pid": "8"
                           }, {
                               "createdBy": "0",
                               "creationDate": "2018-06-25 13:46:38",
                               "lastUpdatedBy": "0",
                               "lastUpdateDate": "2018-06-25 13:46:38",
                               "resourceId": "1662",
                               "systemCode": "tms",
                               "code": "jcsz-spgl-cjsq",
                               "name": "创建申请",
                               "description": "创建申请(基础设置-商品管理)",
                               "url": "/api/goods/importMaintenace",
                               "type": "api",
                               "orderSort": 0,
                               "all": 0,
                               "menuRouterUrl": "",
                               "menuIcon": "",
                               "status": "enable",
                               "children": [],
                               "pid": "8"
                           }],
                           "pid": "7"
                       }]
                   }],
                   "desc": "成功",
                   "code": "200"
               };
                _this.list = res.data;
            },
            //获取子组件事件
            editFunction (data,type) {
                console.log(data,type)
            },
            //获取子组件事件
            addSubFunction (data,type) {
                console.log(data,type)
            },
        },
        created: function () {
            var _this = this;

            _this.search();
        }
    }
</script>

2.2 递归子组件：list-table.vue

<template>
    <div class="list-item">
        <el-table
            class="mt10px"
            :data="list"
            border
            :row-class-name="tableRowClassName"
            style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <list-table
                        @editFunction="editFunction"
                        @addSubFunction="addSubFunction"
                        v-if="props.row.children.length > 0"
                        :list="props.row.children">
                    </list-table>
                </template>
            </el-table-column>

            <el-table-column
                label="序号"
                width="65"
                type="index"
                align="center">
            </el-table-column>

            <el-table-column
                label="名称"
                prop="name">
            </el-table-column>

            <el-table-column
                label="编码"
                prop="code"
                min-width="150px">
            </el-table-column>

            <el-table-column
                label="描述"
                prop="description">
            </el-table-column>

            <el-table-column
                label="类型">
                <template scope="scope">
                    {{dict.type[scope.row.type]}}
                </template>
            </el-table-column>

            <el-table-column
                label="排序"
                prop="orderSort">
            </el-table-column>

            <el-table-column
                label="状态">
                <template scope="scope">
                    {{dict.status[scope.row.status]}}
                </template>
            </el-table-column>

            <el-table-column
                label="请求api"
                prop="url"
                min-width="200px">
            </el-table-column>

            <el-table-column
                label="菜单路由"
                prop="menuRouterUrl"
                min-width="200px">
            </el-table-column>

            <el-table-column
                label="操作"
                width="220"
                align="center">
                <template scope="scope">
                    <el-button  type="info" @click="editFunction(scope.row,'edit')">编辑</el-button>
                    <el-button  type="warning" @click="changeStatus(scope.row.resourceId,scope.row)">
                        {{dict.status[scope.row.status]}}
                    </el-button>
                    <el-button  type="success" @click="addSubFunction(scope.row,'addChild')">添加子资源</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        name: "listTable",
        props: {
            list: Array
        },
        computed: {
            dict () {
                return this.$store.state.dict.urlResourcesMange;
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (row.children.length > 0) {
                    return 'url-resources-expand';
                } else {
                    return 'url-resources-hide';
                }

                return '';
            },

            editFunction (row,type) {
                this.$emit('editFunction', row,type);
            },

            addSubFunction (row,type) {
                this.$emit('addSubFunction', row,type);
            },

            changeStatus(resourceId, row) {

                var _this = this,
                    status = row.status == 'enable' ? 'disable' : 'enable',
                    statusStr = {
                        enable: '停用',
                        disable: '启用'
                    };

                _this.$confirm('确认' + statusStr[row.status] + '? ', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(function () {
                    _this.$get({
                        url: '/api/manager/sysResource/status/' + resourceId + '/' + status,
                        success: function (res) {
                            _this.$message.success(statusStr[row.status] + '成功！');
                            row.status = status
                        }
                    });
                }, function () {});
            }
        }
    };
</script>
<style>
    .url-resources-hide .el-table__expand-icon {
        display: none !important;
    }
</style>

 

web行路人
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件递归调用
m0_46622336的博客
10-16 1089
一、子组件VMenu 利用自身组件递归，达到无限极菜单效果 文件VMenu.vue源代码如下 <template> <ul> <li v-for="(item,index) in listdata"> <span @click="handle(item)">{{item.title}}</span> <v-menu :listdata='item.children' v-if="item.children"
vue 如何使用递归组件
01-21
组件一般要给个名字，方便我们使用递归组件的时候来使用，如果我自身有children，就把children当做list再传给自己，做一个递归的循环。 此时就渲染出来了。 如果我再增加一个children呢？像这样： 此时不用做任何...
vue 组件递归调用
07-03
vue组件递归调用，展示树状结构，
Vue 递归组件
大灰狼的小绵羊哥哥的博客
12-09 6677
对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加， 那么有没有一种方法来解决这个问题呢？ 答案是肯定的，我们可以通过 递归 方式来生成这个结构，当然在 Vue 模板中也是可以实现的，我们可以在 Vue 的组件中调用自己本身，这样就能达到目的。 当然，在 Vue 中，组件可以递归的调用本身，但是有一些条件： 该组件一定要有 name 属性 要确保递归的调用有终止条件，防止内存溢出 为了方便理解递归组件，我写了一个小小的 Demo：
vue递归组件的使用
small_cutey的博客
12-20 2596
vue递归组件的使用
Vue2递归组件实现树形菜单
11-26
今天看了老长时间递归组件，官方给的教程太简便了，根本看不出到底怎么用。于是自己查网摸索了一下，这儿只把核心思想写出来。 效果如下图，点击后打开二级菜单，再点击后打开三级。 //js //引子 //思想：当v-if=...
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
10-17
总结起来，本文通过一个实际的开发案例介绍了如何使用Vue递归组件结合Vuex开发树形组件。递归组件的使用简化了多层级结构的渲染，而Vuex则提供了集中管理状态的能力，使得数据的动态加载和变更变得更为便捷。在实际...
vue组件递归
weixin_48210599的博客
08-26 316
vue组件递归 组件递归的话可以用来做一些后台管理系统的导航列表页面 可以用于多级导航的布局，十分简单 首先是一个Tree组件的话 tree.vue <template> <div> <div :style="indent"> {{title}} </div> </div> </template> <script> export default { name: "Tr
Vue组件递归
weixin_41897680的博客
01-04 499
前言 最近看项目发现了在菜单展示上面用到了组件的递归，跟函数递归类似，就是组件内部调用自己。 实现 用途 组件递归一般会用到像菜单这样的树形结构，不确定层级时可以通过组件递归实现。 实例 使用页面 <template> <div> <my-tree :menu-data="menuData"></my-tree> </div> </template> <script> import myTr
【VUE】组件的递归
weixin_42342065的博客
09-04 297
前言： 在使用vue框架进行开发的时候可能会使用到组件的递归，比如常见的树形结构。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /&gt
Vue中如何进行递归组件的处理？
最新发布
有我更精彩的博客
03-13 1330
在前端开发中，Vue 是一种流行的 JavaScript 框架，它使用一种名为 Vue 组件的方式来构建用户界面。在 Vue 中进行递归组件的处理是一个常见的面试题，今天我们就来深入探讨一下这个问题。
vue递归组件使用
qq_42972187的博客
07-08 123
之前vue项目中用到递归组件，写过了没来得及整理，递归组件就是组件调用本身，利用name属性注册，还有父子传值知识 第一步：创建父组件 <template> <div> //引用子组件 通过list 传值给子组件 <Diguichild :list="list"></Diguichild> </div> </templat...
Vue实现递归组件
热门推荐
weixin_53291256的博客
04-05 1万+
Vue实现递归组件 文章目录Vue实现递归组件前言一、递归组件是什么？二、Vue实现递归的核心思路三、代码示例1.父级2.子级3、实现效果四、总结 前言 在我们开发过程中，为了提高开发效率，降低开发难度，我们会直接使用组件库来实现，同时也衍生出了很多优秀的组件库，如：饿了么、蚂蚁、Iview、vant等等。但是有时这些组件库提供给我们的组件不满足我们的需求或者定制组件时成本太高，那么我们就要手动实现了。 一、递归组件是什么？ 字面理解为层层递进最后归并到一起，它的特点就是层级分明。 例如饿了么组件库的树
Vue - 组件递归
qq_40147756的博客
09-28 561
Vue - 组件递归的使用
vue 组件递归(组件自己调用自己)
我是咸鱼闲又闲
11-04 7023
vue 组件递归 项目中，用到 el-menu， 侧边栏导航动态加载时，需要用到组件递归，不然js写逻辑，有点繁琐。 干货多，屁话少，上代码 给组件name值 export default { name: "submenu", // 必须给name值 } 直接在本组件中调用即可 // 必须加v-if条件，否则调用会进入死循环，程序会崩 <el-submenu v-if="menu.children && menu.children.length"> <s
vue递归组件
work hard
09-06 3563
递归组件 组件在它的模板内可以递归地调用自己，不过，只有当它有 name 选项时才可以 //当你利用Vue.component全局注册了一个组件, 全局的ID作为组件的 name 选项，被自动设置. components: { //组件实例选项方式注册 //注册之后便可以在父实例的模块中以自定义元素 的形式使用。   ModuleView, }, //全局的ID作为组件
vue 组件递归，非父子间组件通信简单实例
Mr_Yan的博客
09-07 938
VUE虽说相比于其他两大框架来说简单易上手些，但文档中仍是有些例子有点简单，下面就写出组件递归和非父子组件通信以供大家参考。       组件递归：          递归组件简单实例 Hello Summmer Number: Vue.compo
vue组件递归加手风琴的案列
06-07
好的，下面是一个简单的 Vue 组件递归加手风琴的示例代码： ```html (item)"> {{ item.name }} <recursive-accordion :items="item.children"></recursive-accordion> export default { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值