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


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM