element tree grid

grille-arborescence-éléments

la grille arborescente étend element ui avec vue

versions v1.0.4

• essayez d'agrandir la ligne développée après le rechargement des données

avoir des problèmes avec <el-table-column type="selection" fixed></el-table-column>

si vous avez une idée, bienvenue !!!

démos

commencer

• cloner sur votre projet

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

• utiliser avec un nœud

  • installer

  npm install element-tree-grid --save

  • dans ton projet

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

utilisation

• usage courant

   < 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 >

• obtenir des enfants à distance

  • 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 )
          }
      }
  } )

• attributs

  tous les accessoires de el-table-column sont pris en charge ;

  nom	description	valeurs
  soutenir	identique à el-table-column
  étiquette	identique à el-table-column
  largeur	identique à el-table-column
  fixé	identique à el-table-column
  redimensionnable	identique à el-table-column
  formateur	identique à el-table-column
  Nom de classe	identique à el-table-column
  Clé d'arbre	la clé pour l'analyse intégrée	tapez : String , par défaut : 'id'
  cléNumEnfant	la clé de childNum	tapez : String , par défaut : 'child_num'
  cléparent	la clé de parent_id	tapez : String , par défaut : 'parent_id'
  clé de niveau	la clé de la profondeur du nœud	tapez : String , par défaut : 'depth'
  cléenfant	la clé des enfants du nœud a été placée	tapez : String , par défaut : 'children'
  icône de fichier	icône de fichier nom de classe	tapez : String , par défaut : 'el-icon-file'
  icône de dossier	icône de dossier nom de classe, une fois ouvert, utilisez : folderIcon-open	tapez : String , par défaut : 'el-icon-folder'
  télécommande	méthode à distance pour avoir des enfants	type: Function , par défaut : null
  tousà distance	demandez toutes les données à distance, vous devez d'abord configurer le prop remote , utilisez le cache de demande par défaut	tapez: Boolean , par défaut : false
  développerTout	développer tous les nœuds une fois chargé	tapez: Boolean , par défaut : false
  développer la clé	la clé indique si la ligne est ouverte au moment de l'initialisation (juste dépensée une fois)	tapez : String , par défaut : expanded
  indentSize	numéro de retrait, uni en px	tapez: Number , par défaut : 14

exemples

• commun

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

• avec formateur

 < 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 >

• avec 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 >