欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

element-tree-grid(表格树)的使用

程序员文章站 2023-08-22 10:22:44
elementUi 表格树 element-tree-grid el-table ......

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