前言

公司想搞个表格树的展示页面,看着element有个表格树,还以为可以用。

用出来只用表格没有树,研究半天没研究个所以然,只能从新找个

npm里找到一个:vue-table-with-tree-grid

正文

element的坑

element:http://element-cn.eleme.io/#/zh-CN/component/table

然后一模一样的代码用在项目中,标点符合都没改:

emmmmmmmm。。。。最前面的箭头不见了。。。换了好几个系统试了一下。居然都没有。。

毫不犹豫投入了vue-table-with-tree-grid的怀抱

vue-table-with-tree-grid

npm中它的地址:https://www.npmjs.com/package/vue-table-with-tree-grid

安装

npm i vue-table-with-tree-grid -S
Or use yarn: yarn add vue-table-with-tree-grid

导入

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid' Vue.use(ZkTable)
Or import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid' Vue.component(ZkTable.name, ZkTable)

  

示例:

https://github.com/MisterTaki/vue-table-with-tree-grid/blob/master/example/Example.vue

DOM

<zk-table

ref="table"

:data="data"

:columns="columns"

:stripe="props.stripe"

:border="props.border"

:show-header="props.showHeader"

:show-summary="props.showSummary"

:show-row-hover="props.showRowHover"

:show-index="props.showIndex"

:tree-type="props.treeType"

:is-fold="props.isFold"

:expand-type="props.expandType"

:selection-type="props.selectionType"

sum-text="sum"

index-text="#"/>

数据

props: {

stripe: false,

border: false,

showHeader: true,

showSummary: false,

showRowHover: true,

showIndex: false,

treeType: true,

isFold: true,

expandType: false,

selectionType: false

},

data: [

{

name: 'Jack',

sex: 'male',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: 

}

]

}

]

}

]

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: 

}

]

},

{

name: 'Tom',

sex: 'male',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: 

}

]

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: 

}

]

}

]

},

{

name: 'Tom',

sex: 'male',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Tom',

sex: 'male',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: 

}

]

}

],

columns: [

{

label: 'name',

prop: 'name',

width: '400px'

},

{

label: 'sex',

prop: 'sex',

minWidth: '50px'

},

{

label: 'score',

prop: 'score'

},

{

label: 'likes',

prop: 'likes',

minWidth: '200px',

type: 'template',

template: 'likes'

}

],

text1: this.$store.getters.code,

tableData: [],

currentPage: ,

total: ,

pageSize: ,

loading: false,

defaultProps: {

children: 'children',

label: 'label'

}

显示效果:

递归处理树形数据

用树形数据的时候经常会需要为树形数据修改值,增加值之类的

示例

respose.data // 我是树形数据

//遍历

for (let i = , len = respose.data.length; i < len; i++) {

readTree(respose.data[i])

}

const readTree = function(node) {

node.flag === '' ? node.flag1 = '我是flag1的值1' : node.flag1 = '我是flag1的值2'

node.label = 我是label 的新值

if (node.children && node.children.length > ) {

for (let i = , len = node.children.length; i < len; i++) {

readTree(node.children[i])

}

}

}

原始数据转树形数据

//data为原始数据,root最大的根节点,idTxt为本身标识, pidTxt为父级标识, pushTxt为子级标识

getTree(data, root, idTxt, pidTxt, pushTxt) {

// 递归方法

function getNode(id) {

var node = []

for (var i = ; i < data.length; i++) {

if (datai === id) {

datai = getNode(datai)

node.push(data[i])

}

}

if (node.length === ) {

return

} else {

return node

}

}

// 使用根节点

return getNode(root)

}
//原始数据:

{"id":,"pId":,"name":"父节点1 - 展开","open":true},
{"id":,"pId":,"name":"父节点11 - 折叠"},
{"id":,"pId":,"name":"父节点12 - 折叠"},
{"id":,"pId":,"name":"父节点13 - 没有子节点"},
{"id":,"pId":,"name":"父节点2 - 折叠"},
{"id":,"pId":,"name":"父节点21 - 展开","open":true},
{"id":,"pId":,"name":"父节点22 - 折叠"},
{"id":,"pId":,"name":"父节点23 - 折叠"},
{"id":,"pId":,"name":"父节点3 - 没有子节点"}
` ` //处理后的数据 [
{
"id": ,
"pId": ,
"name": "父节点1 - 展开",
"open": true,
"children": [
{
"id": ,
"pId": ,
"name": "父节点11 - 折叠"
},
{
"id": ,
"pId": ,
"name": "父节点12 - 折叠"
},
{
"id": ,
"pId": ,
"name": "父节点13 - 没有子节点"
}
]
},
{
"id": ,
"pId": ,
"name": "父节点2 - 折叠",
"children": [
{
"id": ,
"pId": ,
"name": "父节点21 - 展开",
"open": true
},
{
"id": ,
"pId": ,
"name": "父节点22 - 折叠"
},
{
"id": ,
"pId": ,
"name": "父节点23 - 折叠"
}
]
},
{
"id": ,
"pId": ,
"name": "父节点3 - 没有子节点"
}
]

完结 ,撒花

欢迎大家关注公众号,不定时干货,只做有价值的输出

作者:Dawnzhang 
出处:https://www.cnblogs.com/clwydjgs/p/10689851.html
版权:本文版权归作者
转载:欢迎转载,但未经作者同意,必须保留此段声明;

往期文章:

  Visual Studio Code(VS code)你们都在用吗?或许你们需要看一下这篇博文

  你们都在用IntelliJ IDEA吗?或许你们需要看一下这篇博文

  你真的了解博客园的目录么。。

  博客园博客排版(js样式实例)

table-tree 表格树、树形数据处理、数据转树形数据的更多相关文章

  1. 页面设计--Tree目录树

    Tree目录树控件属性: 根据数据集合来配置相应的信息 加载模式有自动加载.自定加载 web中显示效果图:

  2. 1. mvc 树形控件tree + 表格jqgrid 显示界面

    1.界面显示效果 2.资源下载 地址 1. jstree  https://www.jstree.com/   2.表格jqgrid  https://blog.mn886.net/jqGrid/  ...

  3. Web中树形数据(层级关系数据)的实现—以行政区树为例

    在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...

  4. vue 表格树 固定表头

    参考网上黄龙的表格树进行完善,并添加固定表头等的功能,目前是在iview的项目中实现,如果想在element中实现的话修改对应的元素标签及相关写法即可. <!-- @events @on-row ...

  5. ligerUI---ligerGrid中treegrid(表格树)的使用

    写在前面: 表格树是在普通ligerGrid的基础上,做了一点改变,使数据以表格树的形式显示出来,适用于有级别的数据比如菜单(有父菜单,父菜单下面有子菜单).表格树的显示有两种方法,可以根据自己的项目 ...

  6. treegrid 表格树

    treegrid  实现表格树的结构 效果图: 第一步:页面布局 <div class="col-sm-12 select-table table-striped" styl ...

  7. [置顶] ※数据结构※→☆非线性结构(tree)☆============树结点 链式存储结构(tree node list)(十四)

    结点: 包括一个数据元素及若干个指向其它子树的分支:例如,A,B,C,D等. 在数据结构的图形表示中,对于数据集合中的每一个数据元素用中间标有元素值的方框表示,一般称之为数据结点,简称结点. 在C语言 ...

  8. CSS实现树形结构 + js加载数据

    看到一款树形结构,比较喜欢它的样式,就参照它的外观自己做了一个,练习一下CSS. 做出来的效果如下: li { position: relative; padding: 5px 0; margin:0 ...

  9. Delphi中根据分类数据生成树形结构的最优方法

    一. 引言:    TreeView控件适合于表示具有多层次关系的数据.它以简洁的界面,表现形式清晰.形象,操作简单而深受用户喜爱.而且用它可以实现ListView.ListBox所无法实现的很多功能 ...

随机推荐

  1. Azure按订阅,资源组,资源类型导出所有资源powershell命令

    一般可以借助powershell命令来读取资源:例如:1, 读取某个订阅下的资源:$subscriptionID = "xxxxxxxx"Set-AzureRmContext $s ...

  2. python defaultdict模块

    from collections import defaultdict '''默认值字典'''d = defaultdict(lambda :123)print(d)print(type(d))pri ...

  3. FineUICore(基础版)v5.4.0已发布!

    FineUICore(基础版)已发布,请先加入知识星球,下载后可以永久免费商用:

  4. 分析dhcp.lease文件,统计DHCP服务器IP自动分配

    #!/usr/bin/env python # coding=utf-8 import string import time,datetime class TIMEFORMAT: def __init ...

  5. JDK源代码学习-基础类

    一.概述 1.Java,是一套语言规范,例如规定了变量如何定义.控制语句如何写等,提供基本的语法规范.JDK是java自带的一套调用组件,是对基本java语法规范的进一步封装,jdk中都是使用java ...

  6. subprocess

    在没有subprocess这个模块的时候,我们怎么去跟我们的操作系统做交互的呐?下面我们先说说这三个模块:os.system().os.popen().commands. 1.  os.system( ...

  7. docker上传自己的镜像

    https://blog.csdn.net/boonya/article/details/74906927 需要注意的就是命名规范 docker push 注册用户名/镜像名

  8. Python_003_Python循环控制

    ♥3.1  顺序结构 程序中语句执行的基本顺序按各语句出现位置的先后次序执行 ♥3.2  选择结构 主要理解一下if语句的使用即可,单分支 .双分支.多分支以及if语句的嵌套. ♥3.3  循环结构 ...

  9. MT 【331】两元非齐次不等式

    若正实数$x,y$满足$x^3+y^3=(4x-5y)y$ 则 $y$ 的最大值为____ 解答:$x^3+y^3+y^2=4(x-y)y\le x^2$,故$y^3+y^2=x^2-x^3=\dfr ...

  10. 题解:[JSOI2004]平衡点 / 吊打XXX

    这个题目算是一个模拟退火的板子题 物重一定,绳子越短,重物越低,势能越小,势能又与物重成正比 使得$\sum_{i=1}^nd[i]*w[i]$也就是总的重力势能最小,可以使得系统平衡 交了两面半.. ...