element tree grid

元素樹網格

樹狀網格使用vue擴充element ui

發布 v1.0.4

• 嘗試在資料重新載入後展開展開的行

<el-table-column type="selection" fixed></el-table-column>出現問題

如果您有任何想法，歡迎！

示範

開始

• 克隆到您的項目

  git clone https://github.com/foolishchow/element-tree-grid.git
  cd element-tree-grid
  npm install # or yarn
  npm run dev

• 與節點一起使用

  • 安裝

  npm install element-tree-grid --save

  • 在你的專案中

   //common 
  var ElTreeGrid = require ( 'element-tree-grid' ) ;
  Vue . component ( ElTreeGrid . name , ElTreeGrid ) ;

用途

• 常見用法

   < el-table :data =" model.menus " border max-height =" 250 " >
      < el-table-tree-column 
          file-icon =" icon icon-file " 
          folder-icon =" icon icon-folder " 
          prop =" label " label =" labelname " width =" 220 " > </ el-table-tree-column >
      < el-table-column prop =" description " label =" description "   width =" 180 " > </ el-table-column >
  </ el-table >

• 從遠端獲取孩子

  • html

   < div id =" app " style =" padding: 30px; " >
      < el-table :data =" model.menus " border max-height =" 400 " >
          < el-table-tree-column 
              :remote =" remote "
              file-icon =" icon icon-file " 
              folder-icon =" icon icon-folder " 
              prop =" label " label =" MenuName " width =" 320 " > </ el-table-tree-column >
          < el-table-column prop =" id " label =" id " width =" 180 " > </ el-table-column >
          < el-table-column prop =" description " label =" Description " :show-overflow-tooltip =" true " width =" 180 " > </ el-table-column >
      </ el-table >
  </ div >

  • javascript

   new Vue ( {
      el : "#app" ,
      data : {
          model : {
              menus : trees
          }
      } ,
      methods : {
          remote ( row , callback ) {
              // async or sync are both supported
              setTimeout ( function ( ) {
                  callback ( row . children )
              } , 500 )
          }
      }
  } )

• 屬性

  支援el-table-column的所有屬性；

  姓名	描述	價值觀
  支柱	與el-table-column相同
  標籤	與el-table-column相同
  寬度	與el-table-column相同
  固定的	與el-table-column相同
  可調整大小	與el-table-column相同
  格式化程式	與el-table-column相同
  類別名	與el-table-column相同
  樹鍵	嵌套解析的關鍵	類型： String ， 預設值： 'id'
  子數字鍵	childNum 的鍵	類型： String ， 預設值： 'child_num'
  父密鑰	Parent_id 的鍵	類型： String ， 預設值： 'parent_id'
  等級鍵	節點深度的關鍵	類型： String ， 預設值： 'depth'
  子鍵	節點子節點的鍵已放置	類型： String ， 預設值： 'children'
  文件圖示	檔案圖示類別名	類型： String ， 預設值： 'el-icon-file'
  資料夾圖示	資料夾圖示類別名，開啟時使用： folderIcon-open	類型： String ， 預設值： 'el-icon-folder'
  偏僻的	遠距獲取孩子的方法	類型： Function , 預設值： null
  所有遠端	從遠端請求所有數據，必須先配置remote屬性，預設使用請求快取	類型： Boolean ， 預設值： false
  展開全部	載入時展開所有節點	類型： Boolean ， 預設值： false
  展開鍵	key 告訴該行是否在 inited 處開啟（僅消耗一次）	類型： String ， 預設值： expanded
  縮排大小	縮排數，單位px	類型： Number , 預設值： 14

例子

• 常見的

 < el-table-tree-column 
            file-icon =" icon icon-file " 
            folder-icon =" icon icon-folder " 
            prop =" label " 
            label =" labelname " 
            width =" 220 " > </ el-table-tree-column >

• 帶格式化程序

 < el-table-tree-column 
            file-icon =" icon icon-file " 
            folder-icon =" icon icon-folder " 
            prop =" label " 
            label =" labelname " 
            :formatter =" formatter "
            width =" 220 " > </ el-table-tree-column >

• 使用scopedSolts

 < el-table-tree-column 
            file-icon =" icon icon-file " 
            folder-icon =" icon icon-folder " 
            prop =" label " 
            label =" labelname " 
            width =" 220 " >
    < template slot-scope =" scope " >
        < span > prefix = > </ span >
        < span > {{scope.row.label}} -- {{scope.row.id}} </ span > 
        < span > < = suffix </ span >   
    </ template >
</ el-table-tree-column >