element-tree-grid
TypeScript icon, indicating that this package has built-in type declarations

0.1.4 • Public • Published

element-tree-grid

Version Downloads

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>

Package Sidebar

Install

npm i element-tree-grid

Weekly Downloads

73

Version

0.1.4

License

MIT

Unpacked Size

122 kB

Total Files

26

Last publish

Collaborators

  • foolishchow