表格树,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. MySQL安装及环境搭建

    一.Windows 上安装 MySQL Windows 上安装 MySQL 相对简单,最新版本下载地址: 官网:https://dev.mysql.com/downloads/mysql/ 下载步骤: ...

  2. Oracle执行计划学习笔记

    目录 一.获取执行计划的方法 (1) explain plan for (2) set autotrace on (3) statistics_level=all (4) dbms_xplan.dis ...

  3. C#串口通讯概念以及简单实现

    最近在研究串口通讯,其中有几个比较重要的概念,RS-232这种适配于上位机和PC端进行连接,RS-232只限于PC串口和设备间点对点的通信.它很简单的就可以进行连接,由于串口通讯是异步的,也就是说你可 ...

  4. 微软XAML Studio - WPF, Sliverlight, Xamarin, UWP等技术开发者的福音

    目录 编辑器功能 数据源功能 调试数据绑定 伟大的开始 我们来一起实践吧 最近又在继续倒腾WPF的项目,继续使用Caliburn.Micro和Xceed来堆代码.每次调试xaml上的binding,都 ...

  5. Java虚拟机三:OutOfMemoryError异常分析

    根据Java虚拟机规范,虚拟机内存中除过程序计数器之外的运行时数据区域都会发生OutOfMemoryError(OOM),本文将通过实际例子验证分析各个数据区域OOM的情况.为了更贴近生产,本次所有例 ...

  6. 由浅入深讲解责任链模式,理解Tomcat的Filter过滤器

    本文将从简单的场景引入, 逐步优化, 最后给出具体的责任链设计模式实现. 场景引入 首先我们考虑这样一个场景: 论坛上用户要发帖子, 但是用户的想法是丰富多变的, 他们可能正常地发帖, 可能会在网页中 ...

  7. Canvas引入跨域的图片导致toDataURL()报错的问题的解决

    本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...

  8. openlayers4 入门开发系列之批量叠加 zip 压缩 SHP 图层篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. ArcGIS JS Api 4.x修改三维球背景技巧

        通过修改scenceview.js中tileBackground和defaultTileBackground中的png的base64编码就可以达到要求. 4.8中通过修改scenceview. ...

  10. MySQL数据库Inception工具学习与测试 笔记

    MySQL语句的审核,在业界都已经基本被认同了,实际上也是对MySQL语句写法的统一化,标准化,而之前的人工审核,针对标准这个问题其实是很吃力的,标准越多,DBA越累,开发也越累. 那么在这个都追求自 ...