表格树,element-tree-grid需要单独下载并再配合elementUi里el-table使用。

步骤:1、npm install element-tree-grid --save(下载element-tree-grid)

   2、在main.js里引用:import ElTreeGrid 'element-tree-grid'

              Vue.component(ElTreeGrid.name,ElTreeGrid)
   3、html代码(配合el-table使用):
      <el-table :data='data'>
        <el-table-tree-column fixed (是否固定)
                  prop='属性 '     table='表头'
                  levelKey='层级(0,1,2,3代表第几层)'
                  parentKey='parentId(上一层级的ID,值与父层级的ID(treeKey)一致)’
                  treeKey='目前层级的ID,子层级的parentKey与其一致 '
                  :indentSize='没展开一个层级缩进的px'
                  child-key='子层级数据(数组形式)'>
        </el-table-tree-column>
        <el-table-column prop='' lable=''>
        </el-table-column>
        <el-table-column prop='' lable=''>
        </el-table-column>
        .....
      </el-table>
    4、data的结构:
       data:[
        {
          levelKey:0,
          parentKey:0,
          treeKey:1,
          child-key:[
          {

             levelKey:1,
             parentKey:1,
                treeKey:2,
           child-key:[

            levelKey:2,
                 parentKey:2,
                    treeKey:3,
            ....
           ]
          }
         ]
        },
        {.....}
       ]
el-table 的属性方法都可正常使用

element-tree-grid(表格树)的使用的更多相关文章

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

    前言 公司想搞个表格树的展示页面,看着element有个表格树,还以为可以用. 用出来只用表格没有树,研究半天没研究个所以然,只能从新找个 npm里找到一个:vue-table-with-tree-g ...

  2. python 解析xml 文件: Element Tree 方式

    环境 python:3.4.4 准备xml文件 首先新建一个xml文件,countries.xml.内容是在python官网上看到的. <?xml version="1.0" ...

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

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

  4. vue 表格树 固定表头

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

  5. spread表格树实现

    先上图看下效果图: 玩表格的朋友应该对Component和C1Flexgrid并不陌生吧.其实我也有用C1和DGV扩展了一个表格树,占有内存小,效率也可以,但是UI是硬伤,中规中矩,不美观.我上面是基 ...

  6. ExtJS4.2学习(三)Grid表格(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/172.html --------------- ...

  7. Ext4.1 tree grid的右键菜单

    Ext4.1 tree grid的右键菜单功能其实挺简单的 只要添加一个itemcontextmenu事件,并在事件中显示出Menu就OK了. 代码: this.tree.on('itemcontex ...

  8. paip.tree 生成目录树到txt后的折叠查看

    paip.tree 生成目录树到txt后的折叠查看 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.ne ...

  9. 【BZOJ2588】Count On a Tree(主席树)

    [BZOJ2588]Count On a Tree(主席树) 题面 题目描述 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第 ...

  10. hdu 5274 Dylans loves tree(LCA + 线段树)

    Dylans loves tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

随机推荐

  1. python导出zabbix数据并发邮件脚本

    Zabbix没有报表导出的功能,于是通过编写脚本导出zabbix数据并发邮件.效果如下: 下面是脚本,可根据自己的具体情况修改: #!/usr/bin/python #coding:utf-8 imp ...

  2. .net core 并发下的线程安全问题

    抱歉,其实内容并不如题!!!真正的题目应该为<.net core 并发下由于注入模式引起的线程安全问题> 背景(写测试demo所出现的异常,供大家学习与拍砖): .net core web ...

  3. 基于Unity的AR开发初探:发布AR应用到Android平台

    本文接上一篇,介绍一下如何通过Unity发布第一个AR应用至Android平台,在Android手机上使用我们的第一个AR应用. 一.一些准备工作 1.1 准备Java JDK 这里选择的是JDK 1 ...

  4. Solr 17 - Solr的时间为什么比本地少8小时 (附修改方法)

    目录 1 为什么少8小时 2 如何查看Solr的时区 3 修改Solr的时区 3.1 Solr从数据库中同步数据的原理 3.2 为什么要修改时区 3.3 如何修改时区 1 为什么少8小时 (1) 原因 ...

  5. Android项目中独立Git项目分库后的编译调试时Gradle的配置

    基于AS开发项目,对于特定的功能模块,往往抽取成独立的库进行管理,然后上传到Marven库中,通过Gradle依赖的方式进行引用. 其优势体现在: 1,独立的Git项目库,模块功能,及职责界定清晰: ...

  6. HTML/CSS初步了解

    一.CSS是什么? 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示 ...

  7. PyCharm 如何远程连接服务器编写程序

    写在前面 我之前一直通过mstsc远程服务器桌面修改代码,或者本地修改后上传到远程服务器等,各种不爽,现在改用xshell,但有时候还是感觉不方便.于是乎,自己动手配置PyCharm远程连接服务器,这 ...

  8. SQL server 表信息查询

    一.查看所有表的行数select a.name as '表名',b.rows as '表数据行数'from sysobjects a inner join sysindexes bon a.id = ...

  9. Abnormal build process termination--解决IDEA启动web项目报错

    iDEA启动后报Error:Abnormal build process terminatio 报错的原因如下: Error:Abnormal build process termination: & ...

  10. 初始scrapy,简单项目创建和CSS选择器,xpath选择器(1)

    一 安装 #Linux: pip3 install scrapy #Windows: a. pip3 install wheel b. 下载twisted http://www.lfd.uci.edu ...