element-tree-grid

tree grid extends element ui with vue

releases v1.0.4

• try to expand row expanded after data reload

having problems with <el-table-column type="selection" fixed></el-table-column>

if you have any idea , welcome !!!

demos

start

• clone to your project

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

• use with node

  • install

    npm install element-tree-grid --save

  • in you project

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

useage

• common useage

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

• get children from remote
  • 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)
          }
      }
    })

• attributes

  all props of el-table-column are supported;

  | name | description | values | | ----------- | :--------------------------------------------------------------------------------------------- | :-------------------------------------------: | | prop | same as el-table-column | | | label | same as el-table-column | | | width | same as el-table-column | | | fixed | same as el-table-column | | | resizable | same as el-table-column | | | formatter | same as el-table-column | | | className | same as el-table-column | | | treeKey | the key for neasted parse | type:String,
  default:'id' | | childNumKey | the key of childNum | type:String,
  default:'child_num' | | parentKey | the key of parent_id | type:String,
  default:'parent_id' | | levelKey | the key of node's depth | type:String,
  default:'depth' | | childKey | the key of node's children been placed | type:String,
  default:'children' | | fileIcon | file icon className | type:String,
  default:'el-icon-file' | | folderIcon | folder icon className ,when opend use: folderIcon-open | type:String,
  default:'el-icon-folder' | | remote | remote method to get children | type:Function,
  default:null | | allRemote | request all data from remote ,you have to config prop remote first,default use request cache | type:Boolean,
  default:false | | expandAll | expand all nodes when loaded | type:Boolean,
  default:false | | expandKey | key tells if the line is opened at inited ( just expended once ) | type:String,
  default:expanded | | indentSize | indent number ,united in px | type:Number,
  default:14 |

examples

• common

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

• with formatter

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

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