element tree grid

elemento-árbol-cuadrícula

la cuadrícula de árbol extiende element ui con vue

lanzamientos v1.0.4

• intente expandir la fila expandida después de la recarga de datos

teniendo problemas con <el-table-column type="selection" fixed></el-table-column>

Si tienes alguna idea, ¡¡¡bienvenida !!!

población

comenzar

• clonar a tu proyecto

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

• usar con nodo

  • instalar

  npm install element-tree-grid --save

  • en tu proyecto

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

uso

• uso común

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

• conseguir niños desde el control remoto

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

• atributos

  todos los accesorios de el-table-column son compatibles;

  nombre	descripción	valores
  apuntalar	igual que el-table-column
  etiqueta	igual que el-table-column
  ancho	igual que el-table-column
  fijado	igual que el-table-column
  redimensionable	igual que el-table-column
  formateador	igual que el-table-column
  nombre de clase	igual que el-table-column
  árbolClave	la clave para el análisis anidado	tipo: String , predeterminado: 'id'
  niñoNumKey	la clave de childNum	tipo: String , predeterminado: 'child_num'
  clavepadre	la clave de parent_id	tipo: String , predeterminado: 'parent_id'
  nivelClave	la clave de la profundidad del nodo	tipo: String , predeterminado: 'depth'
  clave infantil	Se ha colocado la clave de los hijos del nodo.	tipo: String , predeterminado: 'children'
  archivoIcono	icono de archivo nombre de clase	tipo: String , predeterminado: 'el-icon-file'
  carpetaIcono	icono de carpeta nombre de clase, cuando esté abierto use: folderIcon-open	tipo: String , predeterminado: 'el-icon-folder'
  remoto	método remoto para tener hijos	tipo: Function , predeterminado: null
  todoRemoto	Solicite todos los datos desde el control remoto, primero debe configurar el control remote , el uso predeterminado es el caché de solicitud.	tipo: Boolean , predeterminado: false
  expandir todo	expandir todos los nodos cuando esté cargado	tipo: Boolean , predeterminado: false
  expandir clave	La clave indica si la línea se abre al inicio (solo se gasta una vez)	tipo: String , predeterminado: expanded
  tamaño de sangría	número de sangría, unido en px	tipo: Number , predeterminado: 14

ejemplos

• común

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

• con formateador

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

• con alcanceSolts

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