table-tree 表格树、树形数据处理、数据转树形数据

最新推荐文章于 2024-06-28 03:45:22 发布

dinghuoruo0011

最新推荐文章于 2024-06-28 03:45:22 发布

阅读量3.5k

点赞数

文章标签： javascript 后端 java ViewUI

原文链接：http://www.cnblogs.com/clwydjgs/p/10689851.html

版权

在公司项目中需要实现表格树展示，发现Element UI的表格树不适用，转而采用vue-table-with-tree-grid组件。介绍了安装、导入及示例，并探讨了树形数据的处理和转换方法。

摘要由CSDN通过智能技术生成

前言

公司想搞个表格树的展示页面，看着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: 10,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['footbal