element-tree-grid v0.1.4

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>