表格树,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. ABP学习笔记(1)-使用mysql

    前言 开始学习ABP啦 下载官方模板 ​ 下载地址: https://aspnetboilerplate.com/Templates ​ 我这边选择的是.NET Core+VUE 移除SqlServe ...

  2. hive删除表和表中的数据

    hive删除表和表中的数据,以及按分区删除数据 hive删除表: drop table table_name; hive删除表中数据: truncate table table_name; hive按 ...

  3. 理解线程池到走进dubbo源码

    引言 合理利用线程池能够带来三个好处. ​ 第一:降低资源消耗.通过重复利用已创建的线程降低线程创建和销毁造成的消耗. ​ 第二:提高响应速度.当任务到达时,任务可以不需要等到线程创建就能立即执行. ...

  4. 微服务架构 - SpringBoot整合Jooq和Flyway

    在一次学习分布式跟踪系统zipkin中,发现了jooq这个组件,当时不知这个组件是干嘛的,后来抽空学习了一下,感觉这个组件还挺用的.它主要有以下作用: 通过DSL(Domain Specific La ...

  5. 从零单排学Redis【铂金二】

    前言 只有光头才能变强 好的,今天我们要上[铂金二]了,如果还没有上铂金的,赶紧先去蹭蹭经验再回来(不然不带你上分了): 从零单排学Redis[青铜] 从零单排学Redis[白银] 从零单排学Redi ...

  6. SAP MM Storage Location Missing in MD04 Result?

    SAP MM Storage Location Missing in MD04 Result? Today I received a ticket from business team, a user ...

  7. Android8.0通知

    android里面经常会使用Notification来显示通知的消息,一般使用NotificationManager来创建通知消息 NotificationManager manger = (Noti ...

  8. eShopOnWeb 知多少

    1.引言 eShopOnWeb是基于ASP.NET Core构建,官方创建这样一个示例项目的目的,我想无非以下几点: 推广ASP.NET Core 指导利用ASP.NET Core如何进行架构设计 普 ...

  9. Packets larger than max_allowed_packet are not allowed(mysql数据查询提示:不允许超过允许的最大数据包)解决方案

    问题背景: 首先我的项目运用的时Mysql,在做一个数据更新操作的时候,提示异常:System.Exception:“ExecuteNonQuery:Packets larger than max_a ...

  10. [Inside HotSpot] Visual Studio2017编译调试openjdk12

    编译 下载并编译好freetype,然后安装cygwin并安装必要工具: autoconf make zip unzip 当前目录效果为: 然后cygwin打开,进入openjdk12目录输入命令进行 ...