foolishchow / Element Tree Grid
tree grid extends element ui with vue
Stars: ✭ 223
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Element Tree Grid
Ruoyi Vue
(RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统
Stars: ✭ 596 (+167.26%)
Mutual labels: element, element-ui
Vue Todos
vue最新实战项目教程,从零开始,一步一个脚印,循序渐进。跟着我一起学习vue吧!
Stars: ✭ 1,659 (+643.95%)
Mutual labels: element, element-ui
Tree Transfer
一个基于vue和element-ui的树形穿梭框及邮件通讯录。A tree shaped shuttle box assembly based on Vue and element-ui. Vuecli3版本见https://github.com/hql7/wl-tree-transfer 示例见->
Stars: ✭ 443 (+98.65%)
Mutual labels: tree, element-ui
Nx Admin
👍 A magical 🐮 ⚔ vue admin,记得star
Stars: ✭ 2,497 (+1019.73%)
Mutual labels: element, element-ui
React Redux Grid
A React Grid/Tree Component written in the Redux Pattern
Stars: ✭ 454 (+103.59%)
Mutual labels: tree, grid
Ruoyi Vue Fast
(RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统
Stars: ✭ 107 (-52.02%)
Mutual labels: element, element-ui
Fantastic Admin
一款开箱即用的 Vue 中后台管理系统框架,基于ElementUI,兼容PC、移动端,vue-admin, vue-element-admin, vue后台
Stars: ✭ 153 (-31.39%)
Mutual labels: element, element-ui
Element Ui Verify
如果你受够了饿了么ElementUI原生的校验方式,那就来试试它吧!一款更懂你的校验插件
Stars: ✭ 466 (+108.97%)
Mutual labels: element, element-ui
Vue Admin Beautiful
🚀🚀🚀vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
Stars: ✭ 10,968 (+4818.39%)
Mutual labels: element, element-ui
blog3.0
博客V3.0 目前使用的技术(Nuxtjs + Nestjs + Vue + Element ui + vuetify),存储(MongoDB + Redis + COS)
Stars: ✭ 37 (-83.41%)
Mutual labels: element, element-ui
vue3-admin
🔥 🎉 Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 开发的后台管理系统
Stars: ✭ 1,471 (+559.64%)
Mutual labels: element, element-ui
Primereact
The Most Complete React UI Component Library
Stars: ✭ 2,393 (+973.09%)
Mutual labels: tree, grid
element-tree-grid
tree grid extends element
ui with vue
releases v1.0.4
- try to expand row expanded after data reload
having problems with <el-table-column type="selection" fixed></el-table-column>
if you have any idea , welcome !!!
start
-
clone to your project
git clone https://github.com/foolishchow/element-tree-grid.git cd element-tree-grid npm install #or yarn npm run dev
-
use with node
- install
npm install element-tree-grid --save
- in you project
//common var ElTreeGrid = require('element-tree-grid'); Vue.component(ElTreeGrid.name,ElTreeGrid);
useage
-
common useage
<el-table :data="model.menus" border max-height="250"> <el-table-tree-column file-icon="icon icon-file" folder-icon="icon icon-folder" prop="label" label="labelname" width="220"></el-table-tree-column> <el-table-column prop="description" label="description" width="180"></el-table-column> </el-table>
-
get children from remote
- html
<div id="app" style="padding: 30px;"> <el-table :data="model.menus" border max-height="400"> <el-table-tree-column :remote="remote" file-icon="icon icon-file" folder-icon="icon icon-folder" prop="label" label="MenuName" width="320"></el-table-tree-column> <el-table-column prop="id" label="id" width="180"></el-table-column> <el-table-column prop="description" label="Description" :show-overflow-tooltip="true" width="180"></el-table-column> </el-table> </div>
- javascript
new Vue({ el: "#app", data: { model: { menus: trees } }, methods:{ remote(row,callback){ // async or sync are both supported setTimeout(function() { callback(row.children) },500) } } })
-
attributes
all props of
el-table-column
are supported;name description values prop same as el-table-column
label same as el-table-column
width same as el-table-column
fixed same as el-table-column
resizable same as el-table-column
formatter same as el-table-column
className same as el-table-column
treeKey the key for neasted parse type: String
,
default:'id'
childNumKey the key of childNum type: String
,
default:'child_num'
parentKey the key of parent_id type: String
,
default:'parent_id'
levelKey the key of node's depth type: String
,
default:'depth'
childKey the key of node's children been placed type: String
,
default:'children'
fileIcon file icon className type: String
,
default:'el-icon-file'
folderIcon folder icon className ,when opend use: folderIcon-open
type: String
,
default:'el-icon-folder'
remote remote method to get children type: Function
,
default:null
allRemote request all data from remote ,you have to config prop remote
first,default use request cachetype: Boolean
,
default:false
expandAll expand all nodes when loaded type: Boolean
,
default:false
expandKey key tells if the line is opened at inited ( just expended once ) type: String
,
default:expanded
indentSize indent number ,united in px
type: Number
,
default:14
examples
- common
<el-table-tree-column
file-icon="icon icon-file"
folder-icon="icon icon-folder"
prop="label"
label="labelname"
width="220"></el-table-tree-column>
- with formatter
<el-table-tree-column
file-icon="icon icon-file"
folder-icon="icon icon-folder"
prop="label"
label="labelname"
:formatter="formatter"
width="220"></el-table-tree-column>
- with scopedSolts
<el-table-tree-column
file-icon="icon icon-file"
folder-icon="icon icon-folder"
prop="label"
label="labelname"
width="220">
<template slot-scope="scope">
<span>prefix =></span>
<span>{{scope.row.label}} -- {{scope.row.id}}</span>
<span><= suffix</span>
</template>
</el-table-tree-column>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].