element tree grid

элемент-дерево-сетка

Древовидная сетка расширяет пользовательский интерфейс element с помощью vue

выпускает 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'
  ребенокNumKey	ключ childNum	тип: String , по умолчанию: 'child_num'
  родительский ключ	ключ родительского_id	тип: String , по умолчанию: 'parent_id'
  ключ уровня	ключ глубины узла	тип: String , по умолчанию: 'depth'
  ребенокКлюч	ключ дочерних узлов помещен	тип: String , по умолчанию: 'children'
  значок файла	Имя класса значка файла	тип: String , по умолчанию: 'el-icon-file'
  значок папки	Имя класса значка папки, при открытии используйте: folderIcon-open	тип: String , по умолчанию: 'el-icon-folder'
  удаленный	удаленный метод завести детей	тип: Function , по умолчанию: null
  всеRemote	запрашивать все данные с удаленного компьютера, сначала необходимо настроить remote , по умолчанию использовать кеш запросов	тип: Boolean , по умолчанию: false
  развернутьВсе	развернуть все узлы при загрузке	тип: Boolean , по умолчанию: false
  развернутьКлюч	ключ сообщает, открыта ли строка при запуске (только что израсходована один раз)	тип: String , по умолчанию: expanded
  indentSize	номер отступа, объединенный в 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 >

• с областью видимости Solts

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