记录一下VUE中怎么简单实现树状表格的效果

最新推荐文章于 2024-07-11 10:59:33 发布
最新推荐文章于 2024-07-11 10:59:33 发布
阅读量154 收藏
点赞数 2
分类专栏： VUE 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37618883/article/details/139320345
版权

先准备data数据

data: {
        enumList: [{
            title: '用户身份',
            built: 1,
            touse: 1,
            status: 1,
            createName: '张三',
            createTime: '2024.05.20  12:32:42',
            editName: '李四',
            editTime: '2024.05.20  13:21:25',
            sort: '',
            expanded: false,
            children: [{
                title: '游客',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
            }, {
                title: '评委',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
            }, {
                title: '创作者',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
            }, {
                title: '平台运营人员',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
            }, {
                title: '运营管理员',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
            }, ],
        }, {
            title: '评委等级',
            built: 1,
            touse: 1,
            status: 1,
            createName: '张三',
            createTime: '2024.05.20  12:32:42',
            editName: '李四',
            editTime: '2024.05.20  13:21:25',
            sort: '',
            expanded: false,
            children: [{
                title: '黑铁',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
            }, {
                title: '黄金',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
            }, {
                title: '白银',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
            }, {
                title: '铂金',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
            }, {
                title: '钻石',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
            }, ],
        }, {
            title: '赛区划分',
            built: 1,
            touse: 1,
            status: 1,
            createName: '张三',
            createTime: '2024.05.20  12:32:42',
            editName: '李四',
            editTime: '2024.05.20  13:21:25',
            sort: '',
            expanded: false,
            children: [{
                title: '北京市',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
                children: [{
                    title: '东城区',
                    built: 1,
                    touse: 0,
                    status: 1,
                    createName: '西城区',
                    createTime: '2024.05.20  12:32:42',
                    editName: '李四1',
                    editTime: '2024.05.20  13:21:25',
                    sort: '',
                    expanded: false,
                }, {
                    title: '西城区',
                    built: 1,
                    touse: 0,
                    status: 1,
                    createName: '张三1',
                    createTime: '2024.05.20  12:32:42',
                    editName: '李四1',
                    editTime: '2024.05.20  13:21:25',
                    sort: '',
                    expanded: false,
                }, {
                    title: '朝阳区',
                    built: 1,
                    touse: 0,
                    status: 1,
                    createName: '张三1',
                    createTime: '2024.05.20  12:32:42',
                    editName: '李四1',
                    editTime: '2024.05.20  13:21:25',
                    sort: '',
                    expanded: false,
                }, ],
            }, {
                title: '广东省',
                built: 1,
                touse: 0,
                status: 1,
                createName: '张三1',
                createTime: '2024.05.20  12:32:42',
                editName: '李四1',
                editTime: '2024.05.20  13:21:25',
                sort: '',
                expanded: false,
                children: [{
                    title: '广州',
                    built: 1,
                    touse: 0,
                    status: 1,
                    createName: '西城区',
                    createTime: '2024.05.20  12:32:42',
                    editName: '李四1',
                    editTime: '2024.05.20  13:21:25',
                    sort: '',
                    expanded: false,
                }, {
                    title: '深圳',
                    built: 1,
                    touse: 0,
                    status: 1,
                    createName: '张三1',
                    createTime: '2024.05.20  12:32:42',
                    editName: '李四1',
                    editTime: '2024.05.20  13:21:25',
                    sort: '',
                    expanded: false,
                }, {
                    title: '佛山',
                    built: 1,
                    touse: 0,
                    status: 1,
                    createName: '张三1',
                    createTime: '2024.05.20  12:32:42',
                    editName: '李四1',
                    editTime: '2024.05.20  13:21:25',
                    sort: '',
                    expanded: false,
                }, ],
            }, ],
        }, ],
    },

然后在方法里实现点击展开收缩的效果

toggleExpanded(item) {
            item.expanded = !item.expanded
        },

最后是获取动态数据最终结果为

methods: {
        toggleExpanded(item) {
            item.expanded = !item.expanded
        },
        renderData() {
            let result = []
            const recursive = (items, lev = 1) => {
                items.forEach(item => {
                    result.push(item)
                    if (item.children && item.children.length > 0) {
                        item.expanded && recursive(item.children)
                    }
                });
            }
            recursive(this.enumList)
            return result
        }
    },

将数据和方法绑定到html代码中

<table class="panel-table">
            <thead>
                <tr>
                    <td>序号</td>
                    <td>枚举项名称</td>
                    <td>是否平台内置</td>
                    <td>状态</td>
                    <td>创建人</td>
                    <td>创建时间</td>
                    <td>修改人</td>
                    <td>修改时间</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in renderData()">
                    <td>{{index + 1}}</td>
                    <td><span :class="{panel:item.children && item.children.length > 0}" @click="toggleExpanded(item)">{{item.title}}</span></td>
                    <td>{{item.built == 1 ? '是' : '否'}}</td>
                    <td>{{item.touse == 1 ? '有效' : '禁用'}}</td>
                    <td>{{item.createName}}</td>
                    <td>{{item.createTime}}</td>
                    <td>{{item.editName}}</td>
                    <td>{{item.editTime}}</td>
                    <td>{{item.level}}</td>
                </tr>
            </tbody>
        </table>

效果就有了，样式自定义

爱吃鱼的锅包肉
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用vue实现树表格分页
qq_64001795的博客
10-12 1036
t_module_vue表中已经配置了功能url，为方便，将书本管理组件定义为BookList。如果使用其他名字则需要修改功能url配置，保持一致。页面上使用的面包屑，查询条件，表格，分页等空间，可以查看element-ui官网。该步骤主要关注页面布局，并没有绑定数据，编写完成后，观察页面效果。在Main组件中指定的是用于显示各功能组件的。先不考虑分页，从后台接口获取数据并绑定到表格显示。菜单图标可以到官网去查找。图二： script部分。script部分，图一。
vue树形表格的做法
Vivien_CC的博客
11-28 854
【代码】vue树形表格的做法。
Vue实战（三）：实现树形表格
阿标的博客
03-21 1582
实现树形表格
在vue中实现树形结构的表格，以及对数据结构的处理
多看书少吃饭的博客
01-12 1562
在vue中实现树形结构的表格
object转class_vue-tree-color 树状结构图新增多个class
weixin_39759995的博客
11-20 198
最近有兄台提交了一个issue，开始因为公司太忙时间实在转不过来，当然时间是挤出来的(好啦好啦，我就是为偷懒找借口而已)然后自己看了看修复了一下，大家可以去看看installnpm install vue-tree-color注意：以前使用老版本的兄弟们更新一下Import Pluginsimport Vue from 'vue'import Vue2OrgTree from 'vue-tree-...
EaysUI——Tree
weixin_65975275的博客
05-10 500
EasyUI——Tree
如何根据树节点来查询数据
weixin_44484756的博客
07-27 1284
如何根据树节点来查询数据 做过树形图的朋友应该对树形图的结构很了解吧，现在我要介绍一种简单的利用树形图的节点来查询表格里面的数据，主要是利用获取节点ID来进行重载表格里面的数据，其中得利于layui封装好的重载方法，来看一下吧。 例子： 我要实现的效果是当我点击树形图节点的时候就让表格查询该节点里面的数据，那么该如何实现的呢？其实很简单的，来看一下吧！ 步骤：1、首先要在点击树节点的时候就给节点...
SpringBoot+VUE实现数据表格
热门推荐
世纪末的架构师的博客
07-30 1万+
文章目录前言一、前端准备1. 基础界面2. 导入JS文件二、后端准备1. 创建实体类2. Controller层3. Service层①. UserService接口②. UserServiceImpl实现类4. Mapper层①. UserMapper接口②. UserMapper.xml文件三、前后端整合四、运行结果总结 前言 既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去。 还记得第一次做项目时，因为不会将数据库表中的数据渲染到前端而头疼，最后还是靠layui提供的数据表格A
VUE2 Element表格树形结构实现单节点展开
m0_61355338的博客
07-01 1062
element表格实现单分支展开
基于vue、iview实现tree组件可拖拽、双击编辑
09-23
在IT行业中，前端开发是至关重要的一个领域，而Vue.js作为一个流行的JavaScript框架，因其轻量级、高效且易于学习的特点，被广泛应用于构建用户界面。IView是一个基于Vue的UI组件库，它提供了丰富的预设组件，使得...
Element-UI Table组件上添加列拖拽效果实现方法
08-27
在 Element-UI 中，Table 组件是一个功能强大的数据表格控件，但是在实际应用中，我们可能需要添加一些自定义的功能，例如添加列拖拽效果。下面我们将详细介绍如何在 Element-UI 的 Table 组件上添加列拖拽效果。 ...
Family-Tree:交互式应用程序，以树状图和表格形式表示数据
03-13
"Family-Tree" 是一个交互式的应用程序，它以树状图和表格的形式帮助用户展示和探索他们的家谱信息。这个项目主要基于JavaScript技术，提供了直观的用户体验，让用户能够轻松地创建、编辑和浏览家族成员之间的关系。...
MongoVUE绿色版
12-02
此外，它还支持多种视图模式，如列表、表格和树状视图，以便于查看和编辑数据。 2. **强大的查询功能**：MongoVUE支持复杂的查询构建器，用户可以方便地创建和执行MongoDB查询语句（MongoDB Query Language，MQL）...
Test_将数据库数据显示到树形图中
04-19
数据库中的数据通常以表格的形式存在，包含多个表，每个表由列（字段）和行（记录）组成。要将这些数据转换为树形图，我们需要进行以下几个步骤： 1. 数据提取：使用SQL查询语句或者ORM（对象关系映射）工具，如...
vue详解
m0_46702681的博客
07-08 1145
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能常用指令:v-for 列表渲染，遍历容器的元素或者对象的属性v-bind 为HTML标签绑定属性值，如设置 href，css样式等v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染v-show 根据条件展示某元素，区别在于切换的是display属性的值。
基于若依的文件上传、下载
谁说自己不可以
07-06 1111
基于若依的文件上传、下载、详细步骤。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
最新发布
xiejunlan的博客
07-11 724
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
html可编辑tree,vue中可编辑树状表格的实现代码
06-10
Vue中可编辑树状表格的实现代码： ```html 名称 类型 值 (item)"> <span v-if="item.edit">{{ item.name }} <td>{{ item.type }} <span v-if="item.edit">{{ item.value }} ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值