【组件推荐&改造】vue实现的tree grid 树形表格

最新推荐文章于 2024-07-04 22:59:32 发布
最新推荐文章于 2024-07-04 22:59:32 发布
阅读量1.9k 收藏 6
点赞数
分类专栏： iView vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvdou1120101985/article/details/101842599
版权
本文介绍了如何基于vue和iview实现一个自定义的树形表格组件，通过增加节点图标和自定义展开节点功能，优化了原有组件。提供了API参考和使用示例，详细解释了自定义默认展开节点的配置方法。
摘要由CSDN通过智能技术生成

因业务需要，我需要一个树形表格，类似这样的：

然而iview中的table是这样的：

其实，准确的来说，iview中的表格并不是树形表格，只是用于展开显示每一行的更多信息；

在网上找了一圈，发现有位大佬用vue封装的iview风格的树形表格（vue-table-with-tree-grid），在此基础上我又进行了一些调整和优化：

1. 增加节点图标；

2. 可以自定义展开的节点；（原版本只能默认全部节点展开或者全部折叠）；

效果如下：

API参考原作者的npm描述：

最低0.47元/天 解锁文章
Connie_豆
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在vue项目中使用element-tree-grid（表格树）
Queen-Shir的博客
06-18 4477
Git Demo 网址 ：https://github.com/ProsperLee/element-tree-grid 相关技术贴：https://www.lagou.com/lgeduarticle/41612.html 一、使用方法： 1、通过npm安装element-tree-grid npm install element-tree-grid --save 2、在main.js中注册element-tree-grid var ElTreeGrid = require('el..
如何写用VUE写TREEGRID
郭南君的博客
07-19 2679
转载自：https://blog.csdn.net/s8460049/article/details/61414751 该组件基于技术栈，主要涉及vue-cli生成的webpack项目脚手架，在此脚手架项目基础上完成的，整合了element-ui开源vue的UI项目 1.vue-cli的安装使用 npm install -g vue-cli 全局安装vue-cli之后，使用该脚手架的相...
vue中的 vxe-table表格插件 实现树形数据表
最新发布
2401_85123734的博客
07-04 451
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档e-column field=“name” title=“姓名”>前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档[外链图片转存中…(img-LnOopD1L-1720105160077)][外链图片转存中…(img-C9JjTZVV-1720105160080)]
treeGrid、树形表格
01-09
treegrid插件 当前选中的行： var config = { id: "tg1", width: "800", renderTo: "div1", headerAlign: "left", headerHeight: "30", dataAlign: "left", indentation: "20", folderOpenIcon: "images/folderOpen.gif", folderCloseIcon: "images/folderClose.gif", defaultLeafIcon: "images/defaultLeaf.gif", hoverRowBackground: "false", folderColumnIndex: "1", itemClick: "itemClickEvent", columns:[ {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"}, {headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"}, {headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook"} ], data:[ {name: "城区分公司", code: "CQ", assignee: "", children:[ {name: "城区卡品分销中心"}, {name: "先锋服务厅", children:[ {name: "chlid1"}, {name: "chlid2"}, {name: "chlid3", children: [ {name: "chlid3-1"}, {name: "chlid3-2"}, {name: "chlid3-3"}, {name: "chlid3-4"} ]} ]}, {name: "半环服务厅"} ]}, {name: "清新分公司", code: "QX", assignee: "", children:[]}, {name: "英德分公司", code: "YD", assignee: "", children:[]}, {name: "佛冈分公司", code: "FG", assignee: "", children:[]} ] }; /* 单击数据行后触发该事件 id：行的id index：行的索引。 data：json格式的行数据对象。 */ function itemClickEvent(id, index, data){ window.location.href="ads"; } /* 通过指定的方法来自定义栏数据 */ function customCheckBox(row, col){ return ""; } function customOrgName(row, col){ var name = row[col.dataField] || ""; return name; } function customLook(row, col){ return "查看"; } //创建一个组件对象 var treeGrid = new TreeGrid(config); treeGrid.show(); /* 展开、关闭所有节点。 isOpen=Y表示展开，isOpen=N表示关闭 */ function expandAll(isOpen){ treeGrid.expandAll(isOpen); } /* 取得当前选中的行，方法返回TreeGridItem对象 */ function selectedItem(){ var treeGridItem = treeGrid.getSelectedItem(); if(treeGridItem!=null){ //获取数据行属性值 //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name); //获取父数据行 var parent = treeGridItem.getParent(); if(parent!=null){ //jQuery("#currentRow").val(parent.data.name); } //获取子数据行集 var children = treeGridItem.getChildren(); if(children!=null && children.length>0){ jQuery("#currentRow").val(children[0].data.name); } } }
树形表格组件＜vue-table-with-tree-grid＞的使用
qq_49575831的博客
02-22 1618
使用＜vue-table-with-tree-grid＞搭建树形结构的表格页面
可下拉表格展示子项vue-tree-grid-table踩坑
李水灵的博客
01-22 9663
我总共百度了三种方法，本来使用插件各种报错，不得已自己重写了一个表格，后面有空闲时间了，自己研究了下，这些插件都是可行的，只是要注意下使用的姿势 方法一：使用TreeGrid组件 这一种是基于iview的，所以在使用之前装好iview git地址： https://github.com/huanglong6828/vue-tree-grid 仿照方法，将TreeGrid.vue直接复制进项目里面 ...
如何使用vue-table-with-tree-grid树形表格组件
improvement
06-10 4864
如何使用vue-table-with-tree-grid树形表格组件 1.假如遇到了一个需要搭建一个树形结构的表格页面，这时候vue-table-with-tree-grid便可以派上用场。示例如下。 2.如果你是使用vue ui搭建的项目，使用时操作如下; ​ 2.1: 在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装 ​ 2.2:打开main.js，导入vue-table-with-tree-grid
vue+树形表格拖放.zip
04-20
这个项目的核心在于实现树形表格（Tree Grid）的数据操作，特别是拖放功能，这对于构建交互性强、用户体验良好的数据管理界面至关重要。 首先，让我们深入理解树形表格。树形表格是一种将表格和树结构结合的数据...
如何使用vue-table-with-tree-grid树形表格组件 _@jie
tattoo_jie的博客
09-16 938
如何使用vue-table-with-tree-grid树形表格组件 1.假如遇到了一个需要搭建一个树形结构的表格页面，这时候vue-table-with-tree-grid便可以派上用场。示例如下。 2.如果你是使用vue ui搭建的项目，使用时操作如下; 2.1: 在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装 ​ 2.2:打开main.js，导入vue-table-with-tree-grid i
基于vue和优秀的iView组件库的树型表格treetabletreegrid
08-10
而iView是一个为Vue.js设计的高质量UI组件库，提供了丰富的组件，包括我们今天要讨论的树形表格。 ### 一、Vue.js基础知识 Vue.js的核心特性包括声明式渲染、组件化、指令系统和响应式数据绑定。在创建树型表格时...
基于vuejs实现树形表格的封装vuetreetable
08-10
基于vue.js实现树形表格的封装（vue-tree-table）
treeGrid 树网格
12-20
treeGrid 树网
TreeGrid树状表格
05-28
此插件为树形状表格，可对树形结构的data及其附加属性在表格中动态展示和折叠
TreeGrid树状结构
11-02
Jquery的TreeGrid组件，实现数据一树状图的形式显示，便于查看父子节点
vue-table-with-tree-grid：用于Vue.js 2.0的表（带有tree-grid）组件。 （其样式扩展了@iView）
02-06
带树网格的VUE表 Vue.js 2.0的表格（带有树网格）组件。 （其样式扩展了 ） 例 安装 使用npm： npm i vue-table-with-tree-grid -S 或使用纱线： yarn add vue-table-with-tree-grid 用法 import Vue from 'vue' import ZkTable from 'vue-table-with-tree-grid' Vue . use ( ZkTable ) 要么 import Vue from 'vue' import ZkTable from 'vue-table-with-tree-grid'
vue使用树形表格vue-table-width-tree-grid的用法，CSS的标准文档流
2301_78850344的博客
04-04 248
{{ scope.row }}编辑。2.在main.js中使用。
树形表格组件vue-table-with-tree-grid的使用
qq_38210427的博客
03-16 1182
vue
vue使用vue-table-with-tree-grid树形表格插件
m0_46693606的博客
06-27 374
1.安装 npm i vue-table-with-tree-grid -S 2.在main.js进行引入注册 import Vue from 'vue' import ZkTable from 'vue-table-with-tree-grid' Vue.component(‘tree-table’, ZkTable) 3.在组件中引入 <!-- 表格展示列表区 --> <tree-table index-text="#" :dat
vue 部门tree样式_Vue组件tree实现树形菜单
05-28
Vue组件tree可以实现树形菜单的功能，具体实现步骤如下： 1. 安装vue-tree组件 可以使用npm安装vue-tree组件，命令如下： ...以上就是使用Vue组件tree实现树形菜单的步骤，希望能对你有所帮助。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值