在vue项目中使用element-tree-grid（表格树）

已于 2024-02-02 08:47:48 修改
阅读量4.4k 收藏 11
点赞数 1
分类专栏： Vue.js elementUI 文章标签： vue.js 前端 javascript
于 2020-06-18 13:10:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36069339/article/details/106829722
版权

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('element-tree-grid');
Vue.component(ElTreeGrid.name,ElTreeGrid);

 3、vue文件中的HTML部分：

<!-- tree table -->
        <el-table :data="firstLeveData" border >
            <el-table-column prop="icId" label="icId" type="selection" fixed></el-table-column>
            <el-table-tree-column fixed :expand-all="!1" :remote="remote" file-icon="icon icon-file" folder-icon="icon icon-folder" prop=
最低0.47元/天 解锁文章
牧马少女
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
如何使用vue-table-with-tree-grid树形表格组件
improvement
06-10 4836
如何使用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
基于vuejs实现树形表格的封装vuetreetable
08-10
基于vue.js实现树形表格的封装（vue-tree-table）
vue使用树形表格vue-table-width-tree-grid的用法，CSS的标准文档流
2301_78850344的博客
04-04 228
{{ scope.row }}编辑。2.在main.js中使用。
2024年最新vue使用树形表格vue-table-width-tree-grid的用法(2)，后端面试前端问些啥
最新发布
2401_84438654的博客
05-15 375
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】面包屑导航首页商品管理商品列表卡片视图区域添加分类表格区域show-indexborder是否有效
Element UI 树形表格 TreeGrid TreeTable 实现
weijia3624的专栏
08-23 4783
最近在要使用类似easyui的TreeGrid的功能，但在Element中table没有现成的demo，查了一下，遇到这篇文章，写得非常不错的，原作者是一次性加载，但我们要求使用axios异步加载，所以进行了调整。如下是些简单例子： <template> <div> <div class="container"> ...
树形表格组件＜vue-table-with-tree-grid＞的使用
qq_49575831的博客
02-22 1526
使用＜vue-table-with-tree-grid＞搭建树形结构的表格页面
vue中的树形表格
wind的博客
03-30 846
1.安装依赖：npm i vue-table-with-tree-grid -S。使用vue-table-with-tree-grid。2.main.js中全局引入和注册。
vue-elementui-tree-table.rar
12-05
表格中需要使用tree表格，展开折叠效果，还需要多选表格数据，elementui中有树表格，查看样式及文档，但是没有办法多选，本文章中可以多选获取数据。 https://blog.csdn.net/qq_32442967/article/details/103072390 ...
vue+树形表格拖放.zip
04-20
在本项目中，“vue+树形表格拖放.zip”提供了基于Vue.js的解决方案，用于实现树形表格元素的拖放功能。Vue.js是一个流行的前端JavaScript框架，它以其易学、可扩展性和高效的虚拟DOM更新机制而闻名。Vue-router是Vue...
Vue版AntDesignPro基于Elementui实现
08-10
5. **按需加载**：为了优化性能，项目可能会使用Webpack的Tree Shaking和按需加载策略，仅引入实际使用的Element-ui组件，减少打包后的体积。 6. **Mock数据**：在开发过程中，可能使用Mock.js来模拟API接口，提供...
ElementUI_treeGrid:ElementUI_treeGrid
05-11
带有element-ui库的treeGrid组件 安装 npm i elementui_treegrid 例子 < tree xss=removed xss=removed xss=removed xss=removed xss=removed> < / template > < script > import treeGrid from '....
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：用于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'
element-ui表格二次封装.zip
12-21
配置化表单，只需配置后端接口，请求参数即可查询数据
vue+elementui实现多层树形菜单
10-16
一个完整的树形菜单demo，下载即可运行，包含node_module包，使用vue+el-menu完成多层树形菜单。内含模拟数据格式。
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
在Vue.js开发中，ElementUI是一个非常流行的前端组件库，它提供了丰富的UI组件，如Select和Cascader，用于构建用户界面。然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时...
element 实现自定义 宫格 布局
qq_39927511的博客
10-13 1865
vue element 自定义 宫格 布局
可下拉表格展示子项vue-tree-grid-table踩坑
李水灵的博客
01-22 9652
我总共百度了三种方法，本来使用插件各种报错，不得已自己重写了一个表格，后面有空闲时间了，自己研究了下，这些插件都是可行的，只是要注意下使用的姿势 方法一：使用TreeGrid组件 这一种是基于iview的，所以在使用之前装好iview git地址： https://github.com/huanglong6828/vue-tree-grid 仿照方法，将TreeGrid.vue直接复制进项目里面 ...
Vue 组件间的通信(1)
2401_84436058的博客
04-29 484
父组件向子组件传递数据。：自定义事件。：插槽分发内容，带上标签数据一起传输，主要是父组件想子组件传输。组件间通信规则。
vue3使用element-tree-transfer
03-28
要在Vue3中使用Element Tree Transfer，需要先安装和引入Element和Vue3： 1. 安装Element和Vue3： ```bash npm install element-plus vue@next ``` 2. 在main.js中引入Element和Vue3： ```js import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 3. 在组件中使用Element Tree Transfer： ```vue <template> <el-tree-transfer :data="data" :titles="['Source', 'Target']" :render-content="renderContent" @change="handleChange" /> </template> <script> export default { data() { return { data: [ { id: 1, label: 'Node 1', children: [ { id: 2, label: 'Node 1-1' }, { id: 3, label: 'Node 1-2' } ] }, { id: 4, label: 'Node 2' }, { id: 5, label: 'Node 3', children: [ { id: 6, label: 'Node 3-1' } ] } ], selectedKeys: [] } }, methods: { renderContent(h, { node, data, store }) { return ( <span class="custom-tree-node"> <span>{node.label}</span> <span> <el-button size="mini" onClick={() => this.handleEdit(data)}>Edit</el-button> </span> </span> ) }, handleChange(targetKeys, direction, moveKeys) { console.log(targetKeys, direction, moveKeys) } } } </script> ``` 在上面的例子中，我们创建了一个包含Tree Transfer的组件。我们定义了一个data属性，用于渲染树形结构。我们还定义了一个renderContent函数，用于自定义每个节点的内容。最后，我们定义了一个handleChange方法，用于处理转移事件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值