博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
element-tree-grid(表格树)的使用
阅读量:4982 次
发布时间:2019-06-12

本文共 1286 字,大约阅读时间需要 4 分钟。

表格树,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 的属性方法都可正常使用

转载于:https://www.cnblogs.com/han77/p/10411206.html

你可能感兴趣的文章
SQL Server的复合索引适当用法
查看>>
[转]俞敏洪:我和马云就差了8个字... [来自: news.mbalib.com]
查看>>
intersection &union&zip
查看>>
Spark算子
查看>>
纯JS的ajax实例
查看>>
网站建设常识
查看>>
hashlib加密操作模块
查看>>
C#里的运算符和表达式
查看>>
解决挂载(mount:wrong fs type,bad option,bad superblock on )错误
查看>>
FastReport.Net使用:[20]条码控件使用
查看>>
表空间操作
查看>>
发布功能完成
查看>>
LeetCode: Reverse Nodes in k-Group
查看>>
06_zookeeper_原生API使用2
查看>>
javascript --- 继承初探七日谈 (一)
查看>>
排序算法一:插入排序(Insertion sort)
查看>>
线段树做题总结
查看>>
JAVA基于File的基本的增删改查
查看>>
RocketMQ安装与实例
查看>>
PHP知识库图谱汇总(完善中)
查看>>