表格树,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全国二级等级考试(2019)

    一.前言 2018年9月随着全国计算机等级考试科目中加入“二级Python”,也确立了Python在国内的地位,猪哥相信Python语言势必会像PS那般普及.不久的将来,谁会Python谁就能获得女神 ...

  2. 安全性测试入门:DVWA系列研究(一):Brute Force暴力破解攻击和防御

    写在篇头: 随着国内的互联网产业日臻成熟,软件质量的要求越来越高,对测试团队和测试工程师提出了种种新的挑战. 传统的行业现象是90%的测试工程师被堆积在基本的功能.系统.黑盒测试,但是随着软件测试整体 ...

  3. .net mvc + layui做图片上传(一)

    图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...

  4. ef和mysql使用(一)

    ef开发模式有3种:DateBase First(数据库优先).Model First(模型优先)和Code First(代码优先).这里我用的是code first 一个简单的例子: public ...

  5. 设计模式之组合模式——Java语言描述

    组合模式又叫做部分整体模式,适用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次 介绍 意图 将对象组合成树形结构以表示"部分-整体" ...

  6. ArcMap插件开发初识:Add In

    之前一直在做ArcEngine的相关开发,做的winform相关,新换了工作,又开始新的学习旅程! Add In 这个东西很早就知道有,但是一直没有用过,因为之前的公司有自己框架,接口,虽然我也是做插 ...

  7. sql语句 汉字转拼音首字母

    (1)------------------------------------------------------------------------------------------------- ...

  8. python3第一天,随便写写

    哈哈 我滴第一篇博客,不知道咋写,随意看了看别人的博客,我还是不知道咋写,既然是我的博客,那我就把它当随笔写了(这里就是添加随笔...) 也不知道自己说了啥,不过想到了一句话:日记都是写给别人看的.哈 ...

  9. x宝23大洋包邮的老式大朝华MP3播放器简单评测

    (纯兴趣测评,非广告) 最近逛X宝,看到了这个古董级MP3播放器居然还在售,于是脑抽+情怀泛滥买了一个. 然后呢,从遥远的深圳跨越好几千公里邮过来了这个玩意: 那节南孚5号电池是我自己的,是为了对比一 ...

  10. sed和awk用法

    sed和awk用法 Sed sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为 ...