diff --git a/src-doc/App.vue b/src-doc/App.vue
index a47f97684cc538236cb7ee4dfff0817ff70439d1..85e32aa3ad1b69f78fbadf38c137adf1af1b09d0 100644
--- a/src-doc/App.vue
+++ b/src-doc/App.vue
@@ -4,6 +4,7 @@
 
 <script>
     import AppHome from "./page/home/app-home";
+
     export default {
         name: "App",
         components: {AppHome},
@@ -19,6 +20,5 @@
     html, body {
         margin: 0;
         padding: 0;
-        height: 100%;
     }
 </style>
\ No newline at end of file
diff --git a/src-doc/menus.js b/src-doc/menus.js
index 43fa819df519bdbda3b07fe4c7cc671592b2121c..8280e0b47e80cdaf0c1f0698e838aafa073a5a6f 100644
--- a/src-doc/menus.js
+++ b/src-doc/menus.js
@@ -46,10 +46,11 @@ export default [
             {name: 'VirtualList', title: '虚拟列表', icon: 'pl-list', page: '/normal/virtual-list', complete: true},
             {name: 'Progress', title: '进度条', icon: 'pl-progress', page: '/normal/progress', complete: true},
             {name: 'Tree', title: '树形组件', icon: 'pl-tree', page: '/normal/tree', complete: true},
+            {name: 'Virtual Tree', title: '虚拟树', icon: 'pl-tree', page: '/normal/virtual-tree', complete: true},
             {name: 'Pagination', title: '分页', icon: 'pl-book2', page: '/normal/pagination', complete: true},
             {name: 'Badge', title: '标记', icon: 'pl-badge', page: '/normal/badge', complete: true},
             {name: 'ScrollOption', title: '滚动选择', icon: 'icon-scroll', page: '/normal/scroll-option', complete: false},
-            {name: 'Step', title: '步骤条', icon: 'pl-step', page: '/normal/step', complete: false},
+            {name: 'Step', title: '步骤条', icon: 'pl-step', page: '/normal/step', complete: true},
             {name: 'Transform', title: '穿梭框', icon: 'pl-exchange', page: '/normal/transform', complete: false},
         ]
     },
@@ -106,6 +107,8 @@ export default [
         name: '其他', children: [
             {name: 'Test', title: '测试手动渲染实例', icon: 'pl-table-solid', page: '/normal/test', complete: true},
             {name: 'Drag', title: '测试拖拽节点', icon: 'pl-table-solid', page: '/test/test-drag', complete: true},
+            {name: 'Svg', title: '测试svg', icon: 'pl-table-solid', page: '/test/test-svg', complete: true},
+            {name: 'Canvas', title: '测试canvas', icon: 'pl-table-solid', page: '/test/test-canvas', complete: true},
         ]
     },
 ]
\ No newline at end of file
diff --git a/src-doc/page/home/app-content.vue b/src-doc/page/home/app-content.vue
index cebbe94666bfc5bf240eb9cb3ca858c36b19efb6..0127482ac2f49c8889100e316e952dbf773d35c4 100644
--- a/src-doc/page/home/app-content.vue
+++ b/src-doc/page/home/app-content.vue
@@ -1,11 +1,9 @@
 <template>
-    <div class="app-content">
-        <pl-scroll :style="styles" scrollbar-color="rgba(0,0,0,0.35)">
-            <span class="app-divider"/>
-            <div class="app-content-body">
-                <slot></slot>
-            </div>
-        </pl-scroll>
+    <div class="app-content" :style="styles">
+        <span class="app-divider"/>
+        <div class="app-content-body">
+            <slot></slot>
+        </div>
     </div>
 </template>
 
diff --git a/src-doc/page/home/app-home.vue b/src-doc/page/home/app-home.vue
index 3ba961a7a5d5d658fa3cfa1344cbf659b9beff83..7385c9669da1b75cf3e513c28664da238edfa3fb 100644
--- a/src-doc/page/home/app-home.vue
+++ b/src-doc/page/home/app-home.vue
@@ -61,9 +61,8 @@
 
 <style lang="scss">
     .app-home {
-        height: 100%;
         width: 100%;
-
+        overflow: hidden;
         .app-divider {
             background-color: #efefef;
             height: 16px;
diff --git a/src-doc/page/normal/step.vue b/src-doc/page/normal/step.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd44a3054c5b382d57d108cdc810343748d54ee6
--- /dev/null
+++ b/src-doc/page/normal/step.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="step">
+        <demo-row title="基本用法">
+            <pl-step>
+
+            </pl-step>
+        </demo-row>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "step",
+        props: {},
+        data() {
+            return {}
+        },
+        methods: {},
+    }
+</script>
+
+<style lang="scss">
+</style>
\ No newline at end of file
diff --git a/src-doc/page/normal/tree.vue b/src-doc/page/normal/tree.vue
index 66ab0c78aef3ddda5d077c5125ab65aba8ac75b5..b546770aca82806c71c72ed077552918549b715a 100644
--- a/src-doc/page/normal/tree.vue
+++ b/src-doc/page/normal/tree.vue
@@ -214,9 +214,54 @@
                     labelField="name"
                     childrenField="subs"
                     draggable
-            />
+                    showCheckbox
+            >
+                <template slot-scope="{data}">
+                    <span :style="{color:data.id.charAt(0) === '1'?'#12b4a5':(data.id.charAt(0) === '2'?'#00CC00':'#F38585')}">{{data.name}}</span>
+                </template>
+            </pl-tree>
+        </demo-row>
+
+        <demo-row title="拖拽节点+可勾选">
+            <demo-line>
+                <pl-button label="全部展开" @click="$refs.dragAndCheckTree.expandAll()"/>
+                <pl-button label="打印数据" @click="$plain.log(treeData)"/>
+                <pl-button label="获取选中的数据" @click="$message($refs.dragAndCheckTree.getCheckedData().map(item=>item.name).join(','),{time:null})"/>
+            </demo-line>
+            <ol>
+                <li>父子关联模式下，拖拽节点可能会引起 选中/取消选中 事件</li>
+                <li>拖拽节点会刷新节点的状态，每个节点会先判断子节点是否全都选中，全部选中并且自身未选中的情况下，会选中自身</li>
+                <li>自身选中，但是存在子节点未选中的情况下，会取消选中自身</li>
+                <li>非父子关联模式下，拖拽节点不会导致节点选中状态变化</li>
+            </ol>
+            <pl-tree
+                    ref="dragAndCheckTree"
+                    :data="treeData"
+                    defaultExpandAll
+                    keyField="id"
+                    labelField="name"
+                    childrenField="subs"
+                    showCheckbox
+                    draggable/>
         </demo-row>
 
+        <demo-row title="拖拽节点：可拖拽allowDrag以及可放置allowDrop">
+            <ol>
+                <li>2-2开头的id不能被拖拽</li>
+                <li>3开头的id不能放置任何节点</li>
+            </ol>
+            <pl-tree
+                    ref="dragTree"
+                    :data="treeData"
+                    defaultExpandAll
+                    keyField="id"
+                    labelField="name"
+                    childrenField="subs"
+                    draggable
+                    :allowDrag="allowDrag"
+                    :allowDrop="allowDrop"
+            />
+        </demo-row>
     </div>
 </template>
 
@@ -436,6 +481,14 @@
             nodeIcon(treeNode) {
                 return treeNode.isLeaf ? 'el-icon-document' : 'el-icon-folder-opened'
             },
+            allowDrag(dragTreeNode, event) {
+                // 2-2开头的id不能被拖拽
+                return !dragTreeNode.data.id.startsWith('2-2')
+            },
+            allowDrop(dragTreeNode, dropTreeNode, dragType, event) {
+                // 3-开头的id不能放置任何节点
+                return !dropTreeNode.data.id.startsWith('3')
+            },
         },
     }
 </script>
diff --git a/src-doc/page/normal/virtual-tree-large-data.vue b/src-doc/page/normal/virtual-tree-large-data.vue
new file mode 100644
index 0000000000000000000000000000000000000000..877a1b4c61731ac5bd2dc9e502c5e25a9b34f4b3
--- /dev/null
+++ b/src-doc/page/normal/virtual-tree-large-data.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="virtual-tree-large-data">
+        <demo-line>
+            <pl-button-group>
+                <pl-button label="全部展开" @click="$refs.tree1.expandAll()"/>
+                <pl-button label="全部收起" @click="$refs.tree1.collapseAll()"/>
+                <pl-button label="当前选中节点" @click="$message(!!$refs.tree1.getCurrent() ? $refs.tree1.getCurrent().data.name : '未选中任何节点！')"/>
+                <pl-button label="获取选中的数据" @click="$message($refs.tree1.getCheckedData().map(item=>item.name).join(','),{time:null})"/>
+                <pl-button label="打印数据" @click="$plain.log(treeData)"/>
+            </pl-button-group>
+        </demo-line>
+        <pl-virtual-tree ref="tree1"
+                         :data="treeData"
+                         defaultExpandAll
+                         keyField="id"
+                         labelField="name"
+                         childrenField="subs"
+                         height="360px"
+                         width="500px"
+                         virtual
+                         draggable
+                         showCheckbox
+                         @node-click="val=>$plain.log(val.data.name)"/>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "virtual-tree-large-data",
+        props: {},
+        data() {
+            function dig(path = '0', level = 2) {
+                const list = [];
+                for (let i = 0; i < 10; i += 1) {
+                    const key = `${path}-${i}`;
+                    const treeNode = {
+                        name: key,
+                        id: key,
+                    };
+
+                    if (level > 0) {
+                        treeNode.subs = dig(key, level - 1);
+                    }
+
+                    list.push(treeNode);
+                }
+                return list;
+            }
+
+            const treeData = dig()
+
+            return {
+                treeData,
+            }
+        },
+        methods: {},
+    }
+</script>
+
+<style lang="scss">
+</style>
\ No newline at end of file
diff --git a/src-doc/page/normal/virtual-tree.vue b/src-doc/page/normal/virtual-tree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f9bd4c3dc8d0cbf88f2aa62c04d26049fc1a237a
--- /dev/null
+++ b/src-doc/page/normal/virtual-tree.vue
@@ -0,0 +1,287 @@
+<template>
+    <div class="virtual-tree">
+        <demo-row title="基本用法">
+            <demo-line>
+                <pl-button-group>
+                    <pl-button label="全部展开" @click="$refs.tree1.expandAll()"/>
+                    <pl-button label="全部收起" @click="$refs.tree1.collapseAll()"/>
+                    <pl-button label="展开特定节点" @click="$refs.tree1.expand('2-2-2')"/>
+                    <pl-button label="展开部分节点" @click="expandSome"/>
+                    <pl-button label="当前选中节点" @click="showCurrent"/>
+                    <pl-button label="展开并且设置当前选中节点" @click="expandAndSelect"/>
+                </pl-button-group>
+            </demo-line>
+            <pl-virtual-tree ref="tree1"
+                             :data="treeData"
+                             keyField="id"
+                             labelField="name"
+                             childrenField="subs"
+                             @node-click="val=>$plain.log(val.data.name)"/>
+        </demo-row>
+
+        <demo-row title="懒加载子节点">
+            <pl-virtual-tree ref="lazyTree"
+                             keyField="id"
+                             labelField="name"
+                             childrenField="subs"
+                             lazy
+                             :isLeaf="lazyDemo.isLeaf"
+                             :getChildren="lazyDemo.getChildren"
+            />
+        </demo-row>
+
+        <demo-row title="多选">
+            <demo-line>
+                <pl-button-group>
+                    <pl-button label="展开所有节点" @click="$refs.checkTree.expandAll()"/>
+                    <pl-button label="全部选中" @click="$refs.checkTree.checkAll()"/>
+                    <pl-button label="全部取消" @click="$refs.checkTree.uncheckAll()"/>
+                    <pl-button label="选中部分数据" @click="$refs.checkTree.check(['1-1-1','2-2-2'])"/>
+                    <pl-button label="获取选中的数据" @click="$message($refs.checkTree.getCheckedData().map(item=>item.name).join(','),{time:null})"/>
+                </pl-button-group>
+            </demo-line>
+            <pl-virtual-tree ref="checkTree"
+                             showCheckbox
+                             checkOnClickNode
+                             :expandOnClickNode="false"
+                             :data="treeData"
+                             keyField="id"
+                             labelField="name"
+                             childrenField="subs"/>
+        </demo-row>
+
+        <demo-row title="多选：父子互不关联">
+            <demo-line>
+                <pl-button-group>
+                    <pl-button label="展开所有节点" @click="$refs.unCheckStrictTree.expandAll()"/>
+                    <pl-button label="全部选中" @click="$refs.unCheckStrictTree.checkAll()"/>
+                    <pl-button label="全部取消" @click="$refs.unCheckStrictTree.uncheckAll()"/>
+                    <pl-button label="选中部分数据" @click="$refs.unCheckStrictTree.check(['1-1-1','2-2-2'])"/>
+                    <pl-button label="获取选中的数据" @click="$message($refs.unCheckStrictTree.getCheckedData().map(item=>item.name).join(','),{time:null})"/>
+                </pl-button-group>
+            </demo-line>
+            <pl-virtual-tree ref="unCheckStrictTree"
+                             showCheckbox
+                             checkOnClickNode
+                             :expandOnClickNode="false"
+                             checkStrictly
+                             :data="treeData"
+                             keyField="id"
+                             labelField="name"
+                             childrenField="subs"/>
+        </demo-row>
+
+        <demo-row title="多选：禁用部分选项，只能勾选1结尾的节点">
+            <demo-line>
+                <pl-button-group>
+                    <pl-button label="展开所有节点" @click="$refs.checkableTree.expandAll()"/>
+                    <pl-button label="全部选中" @click="$refs.checkableTree.checkAll()"/>
+                    <pl-button label="全部取消" @click="$refs.checkableTree.uncheckAll()"/>
+                    <pl-button label="选中部分数据" @click="$refs.checkableTree.check(['1-1-1','2-2-2'])"/>
+                    <pl-button label="获取选中的数据" @click="$message($refs.checkableTree.getCheckedData().map(item=>item.name).join(','),{time:null})"/>
+                </pl-button-group>
+            </demo-line>
+            <pl-virtual-tree ref="checkableTree"
+                             showCheckbox
+                             checkOnClickNode
+                             :expandOnClickNode="false"
+                             :data="treeData"
+                             checkStrictly
+                             keyField="id"
+                             labelField="name"
+                             childrenField="subs"
+                             :isCheckable="isCheckable"/>
+        </demo-row>
+
+        <demo-row title="自定义内容：作用域插槽">
+
+            <demo-line>
+                <pl-button-group>
+                    <pl-button label="全部展开" @click="$refs.scopedSlotDemo.expandAll()"/>
+                    <pl-button label="全部收起" @click="$refs.scopedSlotDemo.collapseAll()"/>
+                    <pl-button label="当前选中节点" @click="$message(!!$refs.scopedSlotDemo.getCurrent() ? $refs.scopedSlotDemo.getCurrent().data.name : '未选中任何节点！')"/>
+                    <pl-button label="获取选中的数据" @click="$message($refs.scopedSlotDemo.getCheckedData().map(item=>item.name).join(','),{time:null})"/>
+                </pl-button-group>
+            </demo-line>
+
+            <pl-virtual-tree ref="scopedSlotDemo"
+                             :data="scopedSlotDemo.treeData"
+                             keyField="id"
+                             labelField="name"
+                             childrenField="subs"
+                             style="width: 500px"
+                             showCheckbox>
+                <template slot-scope="data">
+                    <div style="width:100%;display: flex;justify-content: space-between">
+                        <span>{{data.data.name}}</span>
+                        <pl-button-group mode="text">
+                            <pl-button label="Add" @click="e=>scopedSlotDemo.addItem(e,data)" size="mini"/>
+                            <pl-button label="Del" @click="e=>scopedSlotDemo.deleteItem(e,data)" size="mini" status="error"/>
+                        </pl-button-group>
+                    </div>
+                </template>
+            </pl-virtual-tree>
+        </demo-row>
+
+        <demo-row title="自定义内容：渲染函数">
+
+            <demo-line>
+                <pl-button-group>
+                    <pl-button label="全部展开" @click="$refs.renderDemo.expandAll()"/>
+                    <pl-button label="全部收起" @click="$refs.renderDemo.collapseAll()"/>
+                    <pl-button label="当前选中节点" @click="$message(!!$refs.renderDemo.getCurrent() ? $refs.renderDemo.getCurrent().data.name : '未选中任何节点！')"/>
+                    <pl-button label="获取选中的数据" @click="$message($refs.renderDemo.getCheckedData().map(item=>item.name).join(','),{time:null})"/>
+                </pl-button-group>
+            </demo-line>
+
+            <pl-virtual-tree ref="renderDemo"
+                             :data="renderDemo.treeData"
+                             keyField="id"
+                             labelField="name"
+                             childrenField="subs"
+                             style="width: 500px"
+                             showCheckbox
+                             :renderContent="renderDemo.renderContent"/>
+        </demo-row>
+
+        <demo-row title="节点图标">
+            <pl-virtual-tree defaultExpandAll
+                             :data="treeData"
+                             keyField="id"
+                             labelField="name"
+                             childrenField="subs"
+                             :nodeIcon="nodeIcon"/>
+        </demo-row>
+
+        <demo-row title="手风琴模式，展开节点的时候关闭兄弟节点">
+            <pl-virtual-tree according
+                             :data="treeData"
+                             keyField="id"
+                             labelField="name"
+                             childrenField="subs"/>
+        </demo-row>
+
+        <demo-row title="自定义过滤函数">
+            <demo-line>
+                <pl-input v-model="filterText" suffixIcon="el-icon-search" clearIcon/>
+            </demo-line>
+            <pl-virtual-tree defaultExpandAll
+                             :data="treeData"
+                             keyField="id"
+                             labelField="name"
+                             childrenField="subs"
+                             :filterNodeMethod="filterNodeMethod"/>
+        </demo-row>
+        <demo-row title="绑定currentKey">
+            <demo-line>
+                <pl-button label="全部展开" @click="$refs.currentTree.expandAll()"/>
+                <pl-button label="设置currentKey" @click="currentKey = '3-1-1'"/>
+                {{currentKey}}
+            </demo-line>
+            <pl-virtual-tree ref="currentTree"
+                             :currentKey="currentKey"
+                             :data="treeData"
+                             keyField="id"
+                             labelField="name"
+                             childrenField="subs"
+                             @current-change="treeNode=>currentKey = treeNode.key"/>
+        </demo-row>
+
+        <demo-row title="展开图标">
+            <pl-virtual-tree
+                    :data="treeData"
+                    keyField="id"
+                    labelField="name"
+                    childrenField="subs"
+                    expandIcon="el-icon-caret-right"/>
+        </demo-row>
+
+        <demo-row title="拖拽节点">
+            <demo-line>
+                <pl-button label="全部展开" @click="$refs.dragTree.expandAll()"/>
+            </demo-line>
+            <pl-virtual-tree
+                    ref="dragTree"
+                    :data="treeData"
+                    defaultExpandAll
+                    keyField="id"
+                    labelField="name"
+                    childrenField="subs"
+                    draggable
+                    showCheckbox
+            >
+                <template slot-scope="{data}">
+                    <span :style="{color:data.id.charAt(0) === '1'?'#12b4a5':(data.id.charAt(0) === '2'?'#00CC00':'#F38585')}">{{data.name}}</span>
+                </template>
+            </pl-virtual-tree>
+        </demo-row>
+
+        <demo-row title="拖拽节点+可勾选">
+            <demo-line>
+                <pl-button label="全部展开" @click="$refs.dragAndCheckTree.expandAll()"/>
+                <pl-button label="打印数据" @click="$plain.log(treeData)"/>
+                <pl-button label="获取选中的数据" @click="$message($refs.dragAndCheckTree.getCheckedData().map(item=>item.name).join(','),{time:null})"/>
+            </demo-line>
+            <ol>
+                <li>父子关联模式下，拖拽节点可能会引起 选中/取消选中 事件</li>
+                <li>拖拽节点会刷新节点的状态，每个节点会先判断子节点是否全都选中，全部选中并且自身未选中的情况下，会选中自身</li>
+                <li>自身选中，但是存在子节点未选中的情况下，会取消选中自身</li>
+                <li>非父子关联模式下，拖拽节点不会导致节点选中状态变化</li>
+            </ol>
+            <pl-tree
+                    ref="dragAndCheckTree"
+                    :data="treeData"
+                    defaultExpandAll
+                    keyField="id"
+                    labelField="name"
+                    childrenField="subs"
+                    showCheckbox
+                    draggable/>
+        </demo-row>
+
+        <demo-row title="拖拽节点：可拖拽allowDrag以及可放置allowDrop">
+            <ol>
+                <li>2-2开头的id不能被拖拽</li>
+                <li>3开头的id不能放置任何节点</li>
+            </ol>
+            <pl-tree
+                    ref="dragTree"
+                    :data="treeData"
+                    defaultExpandAll
+                    keyField="id"
+                    labelField="name"
+                    childrenField="subs"
+                    draggable
+                    :allowDrag="allowDrag"
+                    :allowDrop="allowDrop"
+            />
+        </demo-row>
+
+        <demo-row title="虚拟滚动(可拖拽+可选)">
+            <virtual-tree-large-data/>
+        </demo-row>
+    </div>
+</template>
+
+<script>
+    import VirtualTreeLargeData from "./virtual-tree-large-data";
+    import DemoTree from './tree'
+
+    export default {
+        name: "virtual-tree",
+        components: {VirtualTreeLargeData},
+        mixins: [DemoTree],
+    }
+</script>
+
+<style lang="scss">
+
+    @include themify {
+        .pl-tree {
+            .pl-list-move-right-enter {
+                opacity: 0;
+                transform: translateX(100px);
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src-doc/page/test/test-canvas.vue b/src-doc/page/test/test-canvas.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d80913e2b296805fb702b58e2b7b39d44f6c3e46
--- /dev/null
+++ b/src-doc/page/test/test-canvas.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="test-canvas">
+        <demo-row>
+            <canvas ref="canvas" class="canvas" width="300" height="200"/>
+        </demo-row>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "test-canvas",
+        props: {},
+        data() {
+            return {}
+        },
+        methods: {},
+        mounted() {
+            const canvas = this.$refs.canvas
+            const ctx = canvas.getContext('2d');
+
+            ctx.beginPath();
+            ctx.moveTo(0, 0);
+            ctx.lineTo(200,0);
+            ctx.lineTo(300, 100);
+            ctx.lineTo(200, 200);
+            ctx.lineTo(0, 200);
+            ctx.lineTo(100, 100);
+            ctx.fill();
+        }
+    }
+</script>
+
+<style lang="scss">
+    .test-canvas {
+        .canvas {
+            /*width: 300px;
+            height: 200px;*/
+            /*background-color: #ddd;*/
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src-doc/page/test/test-svg.vue b/src-doc/page/test/test-svg.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6a2f00e5f2467b2b4f993c38583c476e9d975c7
--- /dev/null
+++ b/src-doc/page/test/test-svg.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="test-svg">
+        <demo-row>
+
+        </demo-row>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "test-svg",
+        props: {},
+        data() {
+            return {}
+        },
+        methods: {},
+    }
+</script>
+
+<style lang="scss">
+    .test-svg {
+        .wrapper {
+            height: 60px;
+            width: 300px;
+            background-color: #f6f6f6;
+            position: relative;
+
+            .wrapper-top {
+                height: 50%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                background-color: #12b4a5;
+            }
+
+            .wrapper-bottom {
+
+            }
+
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index 3b874452820a95771f6bd8ab218ab01e28e6c3d7..115a1403b157cfe5dcf9dcbdd1499bb9bb037f4e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -30,13 +30,15 @@ import progress from './progress'
 import badge from './badge'
 import pagination from './pagination'
 import tree from './tree'
+import virtualTree from './virtual-tree'
+import step from './step'
 
 const plugins = [
     button, icon,
     input, checkbox, radio, select, form, toggle, number, slider, tag, rate,
     loading, popper, popover, tooltip, dropdown,
     message, dialog, notice,
-    list, scroll, dom, collapse, card, carousel, grid, progress, badge, pagination, tree,
+    list, scroll, dom, collapse, card, carousel, grid, progress, badge, pagination, tree, virtualTree, step,
 
     virtualList,
 ]
diff --git a/src/components/list/pl-item.vue b/src/components/list/pl-item.vue
index 508c26a85fdb1d0bb64c319913423e445f78537a..5d7750e520a89142150ac38cb30640bdd1c05fb6 100644
--- a/src/components/list/pl-item.vue
+++ b/src/components/list/pl-item.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="pl-item" @click="e=>$emit('click',e)" :class="{'pl-item-block':block}">
+    <component :is="tag" class="pl-item" @click="e=>$emit('click',e)" :class="{'pl-item-block':block}">
         <slot></slot>
-    </div>
+    </component>
 </template>
 
 <script>
@@ -9,6 +9,7 @@
         name: "pl-item",
         props: {
             block: {type: Boolean},
+            tag: {type: String, default: 'div'},
         },
     }
 </script>
\ No newline at end of file
diff --git a/src/components/list/pl-list.vue b/src/components/list/pl-list.vue
index 3ed283d2ecde144664251e08f45710fdcda6dd28..a8697448aabcddd9ea44ad3b092145c97a1ffcfa 100644
--- a/src/components/list/pl-list.vue
+++ b/src/components/list/pl-list.vue
@@ -1,5 +1,5 @@
 <template>
-    <transition-group :name="`pl-list-move-${direction}`" tag="div" class="pl-list">
+    <transition-group :name="`pl-list-move-${direction}`" :tag="tag" class="pl-list">
         <slot></slot>
     </transition-group>
 </template>
@@ -11,8 +11,9 @@
             direction: {                            //item入场出场动画 'left', 'right', 'top', 'bottom', 'left-top', 'top-left', 'right-top', 'top-right', 'left-bottom', 'bottom-left', 'right-bottom', 'bottom-right'
                 type: String,
                 default: 'bottom-right',
-                
+
             },
+            tag: {type: String, default: 'div'},
         },
     }
 </script>
\ No newline at end of file
diff --git a/src/components/step/index.js b/src/components/step/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..9201a6fcff54d80792f1c84e96def6647e07110c
--- /dev/null
+++ b/src/components/step/index.js
@@ -0,0 +1,4 @@
+import component from './pl-step.vue'
+import {plugin} from "../../utils";
+
+export default plugin(component)
\ No newline at end of file
diff --git a/src/components/step/pl-step.vue b/src/components/step/pl-step.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce2380d1cc2d7f15f8fb0c20fbbf1ebed64ea611
--- /dev/null
+++ b/src/components/step/pl-step.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="pl-step">
+       pl-step
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "pl-step",
+        props: {},
+        data() {
+            return {}
+        },
+        methods: {},
+    }
+</script>
+
+<style lang="scss">
+</style>
\ No newline at end of file
diff --git a/src/components/tree/pl-tree-node.vue b/src/components/tree/pl-tree-node.vue
index 757a839ead76b9ff52dec77721ac6c26e450fabf..1fff618756b31328032ae9cc93e0229d00bd7708 100644
--- a/src/components/tree/pl-tree-node.vue
+++ b/src/components/tree/pl-tree-node.vue
@@ -1,6 +1,4 @@
 <script>
-    import {TreeMark} from "./tree";
-
     export default {
         name: "pl-tree-node",
         props: {
@@ -23,64 +21,50 @@
                 name: 'show',
                 value: this.treeNode.isVisible
             }]
+            const nodeOn = {
+                ...(!!this.plTree.draggable ? {
+                    dragstart: this.plTree.dragState.dragstart,
+                    dragend: this.plTree.dragState.dragend,
+                    dragover: this.plTree.dragState.dragover,
+                } : {})
+            }
+
             const nodeListDirectives = [{
                 name: 'show',
                 value: this.isExpand && this.show
             }]
 
             return (
-                <li class="pl-tree-node" class={this.classes} {...{directives: nodeDirectives}}>
-                    <div class="pl-tree-node-content" style={this.contentStyles} onClick={() => this.plTree.onClickNodeContent(this.treeNode)}>
-                        <div class="pl-tree-node-content-expand-wrapper">
-                            {
-                                this.isLoading ?
-                                    <pl-loading type="beta"/>
-                                    :
-                                    (!this.treeNode.isLeaf && <pl-icon icon={this.plTree.expandIcon || 'el-icon-arrow-right'} onClick={e => this.plTree.onClickExpandIcon(e, this.treeNode)} class="pl-tree-expand-icon"/>)
-                            }
-                        </div>
-                        {!!this.plTree.showCheckbox && <pl-checkbox-indeterminate
-                            checkboxProps={{value: this.treeNode.checkStatus === 'check'}}
-                            status={this.treeNode.checkStatus}
-                            disabled={this.isDisabled || !this.treeNode.isCheckable}
-                            {...{nativeOn: {click: e => this.plTree.onClickCheckbox(e, this.treeNode)}}}
-                        />}
-                        <div class="pl-tree-node-content-label">
-                            {!this.plTree.nodeIcon ? null : <pl-icon icon={this.plTree.nodeIcon(this.treeNode)}/>}
-                            {!!this.plTree.$scopedSlots.default ?
-                                this.plTree.$scopedSlots.default(this.treeNode)
-                                :
-                                (!!this.plTree.renderContent ?
-                                    this.plTree.renderContent(h, this.treeNode)
-                                    :
-                                    <span>{this.treeNode.label}</span>)
-                            }
-                        </div>
-                    </div>
+                <div class={this.classes} {...{directives: nodeDirectives, on: nodeOn}} draggable={this.plTree.draggable}>
+                    {this.getTreeNodeWrapper(h)}
 
                     <pl-collapse-transition>
-                        {!this.treeNode.isLeaf && this.init && <ul class="pl-tree-node-list" {...{directives: nodeListDirectives}}>
+                        {!this.treeNode.isLeaf && this.init && <div class="pl-tree-node-list" {...{directives: nodeListDirectives}}>
                             {!!this.treeNode.children && this.treeNode.children.length > 0 ?
-                                this.treeNode.children.map((item, index) => <pl-tree-node key={index} tree-node={item} level={this.level + 1}/>)
+                                this.treeNode.children.map((item, index) => <pl-tree-node key={index} tree-node={item}/>)
                                 :
-                                <li class="pl-tree-node-empty-text" style={this.emptyTextStyles}>
+                                <div class="pl-tree-node-empty-text" style={this.emptyTextStyles}>
                                     <pl-icon icon="el-icon-reading"/>
                                     <span>{this.plTree.emptyText}</span>
-                                </li>
+                                </div>
                             }
-                        </ul>}
+                        </div>}
                     </pl-collapse-transition>
-                </li>
+                </div>
             )
         },
         computed: {
-            level(){
+            level() {
                 return this.treeNode.level - 1
             },
             classes() {
                 return [
                     'pl-tree-node',
-                    {'pl-tree-node-expand': this.isExpand, 'pl-tree-node-current': this.treeNode.key === this.plTree.p_currentKey}
+                    {
+                        'pl-tree-node-expand': this.isExpand,
+                        'pl-tree-node-current': this.treeNode.key === this.plTree.p_currentKey,
+                        'pl-tree-node-drop-inner': this.plTree.dragState.dropInnerKey === this.treeNode.key
+                    },
                 ]
             },
             /**
@@ -90,7 +74,26 @@
              */
             contentStyles() {
                 return {
-                    paddingLeft: `${this.plTree.intent * this.level + 6}px`
+                    paddingLeft: `${this.contentPaddingLeft}px`
+                }
+            },
+            contentPaddingLeft() {
+                let paddingLeft = this.plTree.intent * this.level + 6
+                paddingLeft += 18
+                if (this.plTree.showCheckbox) {
+                    paddingLeft += 24
+                }
+                return paddingLeft
+            },
+            /**
+             * expander节点style
+             * @author  韦胜健
+             * @date    2020/4/2 11:46
+             */
+            expanderStyles() {
+                let paddingLeft = this.plTree.intent * this.level + 6
+                return {
+                    paddingLeft: `${paddingLeft}px`
                 }
             },
             /**
@@ -116,13 +119,42 @@
                 }
                 return isExpand
             },
-            /**
-             * 当前节点是否处于加载状态
-             * @author  韦胜健
-             * @date    2020/3/31 10:54
-             */
-            isLoading() {
-                return this.plTree.getMark(this.treeNode.key, TreeMark.loading)
+        },
+        methods: {
+            getTreeNodeWrapper(h) {
+                return (
+                    <div class="pl-tree-node-wrapper">
+                        <div class="pl-tree-node-operator" style={this.expanderStyles}>
+                            <span class="pl-tree-node-expander">
+                                {
+                                    this.treeNode.isLoading ?
+                                        <pl-loading type="beta"/>
+                                        :
+                                        (!this.treeNode.isLeaf && <pl-icon icon={this.plTree.expandIcon || 'el-icon-arrow-right'} onClick={e => this.plTree.onClickExpandIcon(e, this.treeNode)} class="pl-tree-expand-icon"/>)
+                                }
+                            </span>
+                            {!!this.plTree.showCheckbox && <pl-checkbox-indeterminate
+                                checkboxProps={{value: this.treeNode.checkStatus === 'check'}}
+                                status={this.treeNode.checkStatus}
+                                disabled={this.isDisabled || !this.treeNode.isCheckable}
+                                {...{nativeOn: {click: e => this.plTree.onClickCheckbox(e, this.treeNode)}}}
+                            />}
+                        </div>
+                        <div class="pl-tree-node-content" onClick={() => this.plTree.onClickNodeContent(this.treeNode)} style={this.contentStyles}>
+                            {!!this.plTree.$scopedSlots.default ?
+                                this.plTree.$scopedSlots.default(this.treeNode)
+                                :
+                                (!!this.plTree.renderContent ?
+                                    this.plTree.renderContent(h, this.treeNode)
+                                    :
+                                    [
+                                        !this.plTree.nodeIcon ? null : <pl-icon icon={this.plTree.nodeIcon(this.treeNode)}/>,
+                                        <span class="pl-tree-node-label">{this.treeNode.label}</span>
+                                    ])
+                            }
+                        </div>
+                    </div>
+                )
             },
         },
     }
diff --git a/src/components/tree/pl-tree.vue b/src/components/tree/pl-tree.vue
index a13c7c88f76be5bbf132ee724ce21a58262bb03d..97cd9a88c4fcc2b34867e74bed577d3f4ce381f9 100644
--- a/src/components/tree/pl-tree.vue
+++ b/src/components/tree/pl-tree.vue
@@ -1,11 +1,12 @@
 <template>
-    <ul :class="classes" v-loading="isLoading">
-        <li class="pl-tree-node-empty-text" v-if="!formatData || formatData.length === 0">
+    <div :class="classes" v-loading="isLoading">
+        <div class="pl-tree-node-empty-text" v-if="!formatData || formatData.length === 0">
             <pl-icon icon="el-icon-reading"/>
             <span>{{emptyText}}</span>
-        </li>
+        </div>
         <pl-tree-node v-else v-for="(item,index) in formatData" :key="item.key || index" :data="item" :tree-node="item"/>
-    </ul>
+        <span class="pl-tree-drag-indicator" v-if="draggable" v-show="dragState.show" :style="indicatorStyles"></span>
+    </div>
 </template>
 
 <script lang="ts">
@@ -13,6 +14,18 @@
     import PlTreeNode from "./pl-tree-node.vue";
     import {TreeMark, TreeNode} from "./tree";
 
+    /**
+     * 拖拽放置的类型
+     * @author  韦胜健
+     * @date    2020/4/1 17:15
+     */
+    enum DropType {
+        prev = 'prev',
+        inner = 'inner',
+        next = 'next',
+        null = 'null',
+    }
+
     export default {
         name: "pl-tree",
         components: {PlTreeNode},
@@ -63,8 +76,8 @@
 
             // 拖拽属性
             draggable: {type: Boolean},                                 // 是否可拖拽
-            isDraggable: {type: Function},                              // 判断节点是否可以拖拽
-            isDroppable: {type: Function},                              // 判断目标节点能够被放置
+            allowDrag: {type: Function},                                // 判断节点是否可以拖拽
+            allowDrop: {type: Function},                                // 判断目标节点能够被放置
         },
         emitters: {
             emitNodeClick: Function,
@@ -122,6 +135,190 @@
             const mark: { [key: string]: TreeMark } = {}                                        // 标记映射
             const formatCount: number = 0;                                                      // 当前格式化数据的时候，数据的版本，用来清理mark中不需要保存的数据
             let rootTreeNode: TreeNode = new TreeNode({}, this, 0);                             // 根节点 treeNode对象
+
+            const dragState: {
+                show: boolean,
+                indicatorStyles: { top?: number, width?: number, left?: number },
+                dropInnerKey: string,
+                dropType: DropType,
+                dropTreeNode: TreeNode,
+                dragTreeNode: TreeNode,
+                dragstart: Function,
+                dragend: Function,
+                dragover: Function,
+                reflow: boolean,
+            }
+                = {
+                show: false,                                                                    // 当前拖拽指示器是否展示
+                indicatorStyles: {},                                                            // 当前指示器样式
+                dropInnerKey: null,                                                             // 当前拖拽，即将放入内部的节点的key
+                dropType: DropType.null,                                                        // 当前拖拽在目标节点的位置
+                dropTreeNode: null,                                                             // 当前放置目标节点的treeNode对象
+                dragTreeNode: null,                                                             // 当前拖拽目标节点的treeNode对象
+                reflow: false,                                                                  // 当前是否正在重新渲染，重新渲染的时候不要展开动画
+                /*---------------------------------------drag listener-------------------------------------------*/
+                dragstart: (e) => {
+                    e.stopPropagation()
+                    e.dataTransfer.effectAllowed = 'move'
+
+                    const dragTreeNode = this.getTreeNodeFromEl(e.currentTarget)
+
+                    if (!this.isAllowDrag(dragTreeNode, e)) {
+                        e.preventDefault()
+                        return
+                    }
+
+                    dragState.dragTreeNode = dragTreeNode
+                },
+                dragend: (e) => {
+                    e.stopPropagation()
+
+                    dragState.show = false
+                    dragState.dropInnerKey = null
+                    dragState.indicatorStyles = {}
+
+                    const {dropTreeNode, dragTreeNode, dropType} = dragState
+
+                    if (!!dropTreeNode) {
+                        dragTreeNode.removeSelf()
+                        const dropRelativeData = dropTreeNode.parent.childrenData
+
+                        dragState.reflow = true
+                        switch (dropType) {
+                            case DropType.prev:
+                                // console.log(`添加到 ${dropTreeNode.label} 之前`)
+                                dropTreeNode.splice(dropRelativeData.indexOf(dropTreeNode.data), 0, dragTreeNode.data)
+                                break
+                            case DropType.inner:
+                                // console.log(`添加到 ${dropTreeNode.label} 内部`)
+                                dropTreeNode.push(dragTreeNode.data)
+                                break
+                            case DropType.next:
+                                // console.log(`添加到 ${dropTreeNode.label} 之后`)
+                                dropTreeNode.splice(dropRelativeData.indexOf(dropTreeNode.data) + 1, 0, dragTreeNode.data)
+                                break
+                            default:
+                                // console.log(`无任何变化`)
+                                break
+                        }
+                        this.refreshCheckStatus()
+                        setTimeout(() => dragState.reflow = false, 100)
+                    }
+                },
+                /*---------------------------------------drop listener-------------------------------------------*/
+                dragover: (e) => {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    e.dataTransfer.dropEffect = 'move'
+
+                    const treeNode = this.getTreeNodeFromEl(e.currentTarget)
+
+                    let nothing = () => {
+                        e.dataTransfer.dropEffect = 'none'
+                        dragState.show = false
+                        dragState.dropInnerKey = null
+                        dragState.indicatorStyles = {}
+                        dragState.dropType = DropType.null
+                        dragState.dropTreeNode = null
+                    }
+
+                    // 如果当前 over 的节点为拖拽节点的子节点，则什么事也不干，清空标记信息并且什么也不做
+                    if (treeNode === dragState.dragTreeNode) {
+                        nothing()
+                        return;
+                    } else {
+                        let containsFlag = false
+                        this.iterateAll(dragState.dragTreeNode.children, (child) => {
+                            if (child === treeNode) {
+                                containsFlag = true
+                            }
+                        })
+                        if (containsFlag) {
+                            nothing()
+                            return;
+                        }
+                    }
+
+                    let content = e.currentTarget.querySelector('.pl-tree-node-content')
+                    let rect = content.getBoundingClientRect()
+
+                    if (!!rect) {
+                        dragState.dropTreeNode = treeNode
+
+                        let {height, width, left, top} = rect
+                        width -= dragState.dropTreeNode.indicatorLeft
+                        left += dragState.dropTreeNode.indicatorLeft
+
+                        let deltaY = e.clientY - top
+                        let allowDrop;
+
+
+                        if (deltaY < height / 4) {
+                            // 上
+                            allowDrop = this.isAllowDrop(dragState.dragTreeNode, dragState.dropTreeNode, DropType.prev, e)
+                            if (!allowDrop) return nothing()
+
+                            dragState.dropType = DropType.prev
+                            dragState.show = true
+                            dragState.dropInnerKey = null
+                            dragState.indicatorStyles = {top, width, left}
+                        } else if (deltaY < height * (3 / 4)) {
+                            // 中
+                            allowDrop = this.isAllowDrop(dragState.dragTreeNode, dragState.dropTreeNode, DropType.inner, e)
+                            if (!allowDrop) return nothing()
+
+                            dragState.dropType = DropType.inner
+                            dragState.show = false
+                            dragState.indicatorStyles = {}
+                            dragState.dropInnerKey = treeNode.key
+
+                        } else {
+                            // 下
+                            allowDrop = this.isAllowDrop(dragState.dragTreeNode, dragState.dropTreeNode, DropType.next, e)
+                            if (!allowDrop) return nothing()
+
+                            if (treeNode.isExpand && !!treeNode.children && treeNode.children.length > 0) {
+                                // 节点已经展开，并且有子节点，表示插入到第一个子节点之前
+                                let firstChildTreeNodeDom = undefined
+
+                                if (this.$options.name === 'pl-tree') {
+                                    firstChildTreeNodeDom = e.currentTarget.querySelector('.pl-tree-node')
+                                } else if (this.$options.name === 'pl-virtual-tree') {
+                                    firstChildTreeNodeDom = e.currentTarget.nextSibling
+                                } else {
+                                    console.warn(`can't recognise ${this.$options.name}`)
+                                    return nothing
+                                }
+
+                                content = firstChildTreeNodeDom.querySelector('.pl-tree-node-content')
+                                rect = content.getBoundingClientRect()
+                                if (!!rect) {
+                                    dragState.dropTreeNode = this.getTreeNodeFromEl(firstChildTreeNodeDom)
+
+                                    width = rect.width
+                                    left = rect.left
+                                    top = rect.top
+
+                                    width -= dragState.dropTreeNode.indicatorLeft
+                                    left += dragState.dropTreeNode.indicatorLeft
+
+                                    dragState.dropType = DropType.prev
+                                    dragState.show = true
+                                    dragState.dropInnerKey = null
+                                    dragState.indicatorStyles = {top, width, left}
+                                }
+
+                            } else {
+                                // 否则这时候应该将节点插入到目标节点之后
+                                dragState.dropType = DropType.next
+                                dragState.show = true
+                                dragState.dropInnerKey = null
+                                dragState.indicatorStyles = {top: top + height, width, left,}
+                            }
+                        }
+                    }
+                },
+            }
             return {
                 p_data,
                 p_loading,
@@ -129,6 +326,8 @@
                 mark,
                 formatCount,
                 rootTreeNode,
+                dragState,
+                virtualScrollFlag: false,
             }
         },
         created(): void {
@@ -149,7 +348,9 @@
                     'pl-tree',
                     'pl-tree-node-list',
                     {
-                        'pl-tree-highlight-current': this.highlightCurrent
+                        'pl-tree-highlight-current': this.highlightCurrent,
+                        'pl-tree-reflow': this.dragState.reflow,
+                        'pl-tree-virtual-scrolling': this.virtualScrollFlag,
                     }
                 ]
             },
@@ -168,6 +369,7 @@
                 }
                 this.formatCount++
                 this.rootTreeNode.children = this.p_data.map(item => this.formatNodeData(item, this.formatCount, this.rootTreeNode))
+                this.rootTreeNode.data = {[this.childrenField]: this.p_data}
                 return this.rootTreeNode.children
             },
             /**
@@ -194,6 +396,25 @@
             isLoading() {
                 return this.loading || this.p_loading
             },
+            /**
+             * 拖拽指示器的样式
+             * @author  韦胜健
+             * @date    2020/4/1 17:39
+             */
+            indicatorStyles() {
+                let styles = {} as any
+                const indicatorStyles = this.dragState.indicatorStyles
+                if (!!indicatorStyles.left) {
+                    styles.left = `${indicatorStyles.left + 6}px`
+                }
+                if (!!indicatorStyles.width) {
+                    styles.width = `${indicatorStyles.width}px`
+                }
+                if (!!indicatorStyles.top) {
+                    styles.top = `${indicatorStyles.top}px`
+                }
+                return styles
+            },
         },
         methods: {
             /*---------------------------------------methods-------------------------------------------*/
@@ -309,17 +530,17 @@
                     const treeNode = this.findTreeNodeByKey(key)
                     if (!treeNode) return
                     if (!treeNode.isCheck) {
-                        this.setMark(treeNode.key, TreeMark.checked, true)
+                        treeNode.check(true)
 
                         // 父子关联模式下，改变子节点以及父节点状态
                         if (!this.checkStrictly) {
                             // 选中所有子节点
-                            this.iterateAll(treeNode.children, (child) => this.setMark(child.key, TreeMark.checked, true))
+                            this.iterateAll(treeNode.children, (child) => child.check(true))
                             // 更新父节点状态，如果父节点所有的子节点都处于选中状态，则更新父节点为选中状态
                             let parent = treeNode.parent
                             while (!!parent && !!parent.key) {
                                 if (parent.children.every(child => child.isCheck)) {
-                                    this.setMark(parent.key, TreeMark.checked, true)
+                                    parent.check(true)
                                     parent = parent.parent
                                 } else {
                                     break
@@ -343,17 +564,17 @@
                     const treeNode = this.findTreeNodeByKey(key)
                     if (!treeNode) return
                     if (treeNode.isCheck) {
-                        this.setMark(treeNode.key, TreeMark.checked, false)
+                        treeNode.check(false)
 
                         // 父子关联模式下，改变子节点以及父节点状态
                         if (!this.checkStrictly) {
                             // 取消选中所有子节点
-                            this.iterateAll(treeNode.children, (child) => this.setMark(child.key, TreeMark.checked, false))
+                            this.iterateAll(treeNode.children, (child) => child.check(false))
                             // 更新父节点状态，如果父节点所有的子节点都处于非选中状态，则更新父节点为非选中状态
                             let parent = treeNode.parent
                             while (!!parent && !!parent.key) {
                                 if (parent.isCheck) {
-                                    this.setMark(parent.key, TreeMark.checked, false)
+                                    parent.check(false)
                                     parent = parent.parent
                                 } else {
                                     break
@@ -388,7 +609,7 @@
              * @date    2020/3/31 17:33
              */
             checkAll() {
-                this.iterateAll(this.formatData, (treeNode: TreeNode) => this.setMark(treeNode.key, TreeMark.checked, true))
+                this.iterateAll(this.formatData, (treeNode: TreeNode) => treeNode.check(true))
             },
             /**
              * 取消选中所有节点
@@ -396,7 +617,7 @@
              * @date    2020/3/31 17:33
              */
             uncheckAll() {
-                this.iterateAll(this.formatData, (treeNode: TreeNode) => this.setMark(treeNode.key, TreeMark.checked, false))
+                this.iterateAll(this.formatData, (treeNode: TreeNode) => treeNode.check(false))
             },
             /**
              * 获取选中的数据
@@ -445,12 +666,12 @@
              * @author  韦胜健
              * @date    2020/3/30 19:30
              */
-            iterateAll(treeNodes: TreeNode[], fn) {
+            iterateAll(treeNodes: TreeNode[], fn, iterateChildren?: Function) {
                 if (!treeNodes) return
                 treeNodes.forEach(treeNode => {
                     fn(treeNode)
-                    if (!!treeNode.children) {
-                        this.iterateAll(treeNode.children, fn)
+                    if (!!treeNode.children && (!iterateChildren || iterateChildren(treeNode))) {
+                        this.iterateAll(treeNode.children, fn, iterateChildren)
                     }
                 })
             },
@@ -479,9 +700,7 @@
                 const treeNode = new TreeNode(data, this, level, parent)
                 this.setMark(treeNode.key, TreeMark.treeNode, treeNode)
                 this.setMark(treeNode.key, TreeMark.formatCount, formatCount)
-                if (!!treeNode.children) {
-                    treeNode.children = treeNode.children.map(child => this.formatNodeData(child, formatCount, treeNode, level + 1))
-                }
+                treeNode.children = (treeNode.childrenData || []).map(child => this.formatNodeData(child, formatCount, treeNode, level + 1))
                 return treeNode
             },
             /**
@@ -528,6 +747,66 @@
                 keys = Array.isArray(keys) ? keys : [keys]
                 return await Promise.all(keys.map(handler))
             },
+            getTreeNodeFromEl(el: any) {
+                const instance = el.__vue__
+                if (!!instance.treeNode) return instance.treeNode
+                if (!!instance.$parent && !!instance.$parent.treeNode) return instance.$parent.treeNode
+                return null
+            },
+            /**
+             * 刷新节点选中状态
+             * @author  韦胜健
+             * @date    2020/4/1 22:17
+             */
+            refreshCheckStatus() {
+                if (!this.showCheckbox) return
+                if (this.checkStrictly) return;
+
+                const next = (treeNode: TreeNode) => {
+                    let hasCheck = false
+                    let hasUncheck = false
+
+                    if (!!treeNode.children && treeNode.children) {
+                        treeNode.children.forEach(child => {
+                            next(child)
+                            if (child.isCheck) {
+                                hasCheck = true
+                            } else {
+                                hasUncheck = true
+                            }
+                        })
+                    }
+                    if (hasCheck && !hasUncheck) {
+                        // 所有子节点选中
+                        if (!treeNode.isCheck) {
+                            treeNode.check(true)
+                        }
+                    } else if (hasUncheck) {
+                        // 有子节点未选中
+                        if (treeNode.isCheck) {
+                            treeNode.check(false)
+                        }
+                    }
+                }
+
+                this.formatData.forEach(next)
+            },
+            /**
+             * 判断是否可以拖拽
+             * @author  韦胜健
+             * @date    2020/4/1 23:12
+             */
+            isAllowDrag(dragTreeNode: TreeNode, event: DragEvent) {
+                return !this.allowDrag || this.allowDrag(dragTreeNode, event)
+            },
+            /**
+             * 判断是否可以放置
+             * @author  韦胜健
+             * @date    2020/4/1 23:12
+             */
+            isAllowDrop(dragTreeNode: TreeNode, dropTreeNode: TreeNode, dropType: DropType, event) {
+                return !this.allowDrop || this.allowDrop(dragTreeNode, dropTreeNode, dropType, event)
+            },
             /*---------------------------------------helper-------------------------------------------*/
 
             async initLazy() {
@@ -581,56 +860,65 @@
             position: relative;
             min-height: 100px;
 
-            &, & ul {
-                &.pl-tree-node-list {
-                    margin: 0;
-                    padding: 0;
-                    list-style: none;
-                }
-            }
-
             .pl-tree-node {
                 font-size: 14px;
                 line-height: 24px;
                 cursor: pointer;
-                user-select: none;
+                display: block;
 
-                .pl-tree-node-content {
-                    padding-right: 12px;
-                    display: flex;
-                    align-items: center;
-                    flex-wrap: nowrap;
+                .pl-tree-node-wrapper {
+                    position: relative;
+                    width: 100%;
                     transition: all $transition 300ms;
 
-                    &:hover {
-                        background-color: mix(white, $colorPrimary, 90%);
-                    }
+                    .pl-tree-node-operator {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        user-select: none;
+
+                        .pl-tree-node-expander {
+                            height: 24px;
+                            width: 18px;
+                            display: inline-block;
+                            vertical-align: top;
+                        }
 
-                    .pl-tree-node-content-label {
-                        padding: 0 6px;
-                        flex: 1;
+                        .pl-checkbox-indeterminate {
+                            user-select: none;
+                        }
                     }
 
-                    .pl-checkbox-indeterminate {
-                        padding-left: 6px;
+                    .pl-tree-node-content {
+                        width: 100%;
+
+                        .pl-tree-node-content-label {
+                            padding: 0 6px;
+                        }
                     }
 
-                    .pl-tree-node-content-expand-wrapper {
-                        position: relative;
-                        display: inline-block;
-                        width: 1em;
+                    &:hover {
+                        background-color: mix(white, $colorPrimary, 90%);
                     }
                 }
 
                 &.pl-tree-node-expand {
-                    & > .pl-tree-node-content > .pl-tree-node-content-expand-wrapper > .pl-tree-expand-icon {
+                    & > .pl-tree-node-wrapper > .pl-tree-node-operator > .pl-tree-node-expander > .pl-tree-expand-icon {
                         transform: rotate(90deg);
                     }
                 }
+
+                &.pl-tree-node-drop-inner {
+                    & > .pl-tree-node-wrapper > .pl-tree-node-content {
+                        color: $colorPrimary;
+                        font-weight: bold;
+                    }
+                }
             }
 
             .pl-icon {
                 color: $icc;
+                margin-right: 6px;
 
                 &.pl-tree-expand-icon {
                     transition: all $transition 300ms;
@@ -647,11 +935,31 @@
                 }
             }
 
+            .pl-tree-drag-indicator {
+                position: fixed;
+                z-index: 9999;
+                height: 2px;
+                background-color: $colorPrimary;
+                display: inline-block;
+            }
+
             &.pl-tree-highlight-current {
-                .pl-tree-node.pl-tree-node-current > .pl-tree-node-content {
+                .pl-tree-node.pl-tree-node-current > .pl-tree-node-wrapper {
                     background-color: mix(white, $colorPrimary, 90%);
                 }
             }
+
+            &.pl-tree-reflow {
+                .pl-tree-node-list {
+                    transition: none !important;
+                }
+            }
+
+            &.pl-tree-virtual-scrolling {
+                .pl-tree-node {
+                    transition: none !important;
+                }
+            }
         }
     }
 </style>
\ No newline at end of file
diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts
index ec85b96d7413c7d323e74c2c4b02c02c105ccaaa..0a47ec2b8ec4ced93f21608d23ce3a80c669fc2c 100644
--- a/src/components/tree/tree.ts
+++ b/src/components/tree/tree.ts
@@ -13,25 +13,28 @@ export class TreeNode {
     droppable: boolean;             // 是否可放置*/
 
     constructor(public data: object, public context: any, public level: number, public parent?: TreeNode | null) {
-        const {keyField, labelField, childrenField} = context
+        const {keyField, labelField} = context
         this.key = !!keyField ? data[keyField] : undefined
         this.label = !!labelField ? data[labelField] : undefined
-        this.children = !!childrenField ? data[childrenField] : undefined
     }
 
+    /*当前是否展开*/
     get isExpand(): boolean {
         return this.context.getMark(this.key, TreeMark.expanded) === true
     }
 
+    /*当前是否已经选中*/
     get isCheck(): boolean {
         return this.context.getMark(this.key, TreeMark.checked) === true
     }
 
+    /*当前是否可以被选中*/
     get isCheckable(): boolean {
         const {isCheckable} = this.context
         return !isCheckable || (isCheckable(this))
     }
 
+    /*当前选中状态：选中、未选中、半选中*/
     get checkStatus(): CheckStatus {
 
         if (this.isLeaf || this.context.checkStrictly) {
@@ -50,6 +53,7 @@ export class TreeNode {
         }
     }
 
+    /*是否为叶子节点*/
     get isLeaf(): boolean {
         const {lazy, isLeaf} = this.context
         if (!!lazy && !!isLeaf) {
@@ -59,6 +63,7 @@ export class TreeNode {
         }
     }
 
+    /*节点是否可见*/
     get isVisible(): boolean {
         const {filterNodeMethod} = this.context
         if (!filterNodeMethod) {
@@ -72,9 +77,75 @@ export class TreeNode {
         }
     }
 
+    /*当前是否处于加载状态*/
+    get isLoading(): boolean {
+        return this.context.getMark(this.key, TreeMark.loading)
+    }
+
+    /*当前节点的子节点的数据*/
+    get childrenData() {
+        return this.data[this.context.childrenField]
+    }
+
+    /**
+     * 拖拽指示器的左偏移距离
+     * @author  韦胜健
+     * @date    2020/4/3 0:09
+     */
+    get indicatorLeft() {
+        let left = this.context.intent * (this.level - 1)
+        if (this.isLeaf && !this.isLoading) {
+            left += 18
+        }
+        return left
+    }
+
+    /*---------------------------------------methods-------------------------------------------*/
+    /**
+     * 选中/取消选中 当前节点
+     * @author  韦胜健
+     * @date    2020/4/1 22:37
+     */
+    check(val: boolean) {
+        if (!this.isCheckable) return
+        this.context.setMark(this.key, TreeMark.checked, val)
+    }
+
+    /**
+     * 设置子节点数据
+     * @author  韦胜健
+     * @date    2020/4/3 0:09
+     */
     setChildren(children: TreeNode[]) {
         this.context.$set(this.data, this.context.childrenField, children)
     }
+
+    /*将当前节点从当前节点的父节点移除*/
+    removeSelf() {
+        const parentChildrenData = this.parent.childrenData
+        parentChildrenData.splice(parentChildrenData.indexOf(this.data), 1)
+    }
+
+    /*在当前节点所有的数组中插入一个节点*/
+    splice(index, count, replace) {
+        let parentChildrenData = this.parent.childrenData
+
+        if (!parentChildrenData) {
+            parentChildrenData = []
+            this.parent.setChildren(parentChildrenData)
+        }
+        return parentChildrenData.splice(index, count, replace)
+    }
+
+    /*在当前节点所在的数组中添加一个节点*/
+    push(data) {
+        let childrenData = this.childrenData
+        if (!childrenData) {
+            childrenData = []
+            this.setChildren(childrenData)
+        }
+        childrenData.push(data)
+    }
 }
 
 export class TreeMark {
diff --git a/src/components/virtual-list/pl-virtual-list.vue b/src/components/virtual-list/pl-virtual-list.vue
index dfea8a92ed8d5796edeb6b53b411928858d3d0e2..91b2c9d59a9ca002d97e34e617df25eec79dfa17 100644
--- a/src/components/virtual-list/pl-virtual-list.vue
+++ b/src/components/virtual-list/pl-virtual-list.vue
@@ -1,15 +1,3 @@
-<template>
-    <pl-scroll class="pl-virtual-list" @scroll="onScroll" scrollbarColor="black" ref="scroll">
-        <div class="pl-virtual-list-strut" :style="strutStyles">
-            <div class="pl-virtual-list-content" :style="contentStyles" ref="content">
-                <template v-for="({item,index}) in targetData">
-                    <slot :item="item" :index="index"></slot>
-                </template>
-            </div>
-        </div>
-    </pl-scroll>
-</template>
-
 <script>
     import {MountedMixin, RefsMixinFactory} from "../../utils/mixins";
 
@@ -27,6 +15,10 @@
             size: {type: Number, require: true},                        // 每一行高度
             remain: {type: Number, require: true},                      // 一屏渲染的行数，总共渲染三屏，一屏渲染个数越多，滚动效果越好，但是浏览器卡顿的效果可能更明显；如果不传remain，则根据size以及 pl-virtual-list 跟节点的高度自动计算行数
             dynamicSize: {type: Boolean},                               // 标识列表中的每一行高度不是固定的，但是还是需要提供 size 属性，而且size属性不能与每一行的高度差距太多；
+            renderContent: {type: Function},                            // 渲染content节点的渲染函数
+
+            contentIs: {},
+            contentProps: {},
         },
         watch: {
             remain: {
@@ -67,11 +59,29 @@
                 dataInfo: null,                         // 所有的位置信息
             }
         },
+        render(h) {
+
+            const Content = this.contentIs || 'div'
+
+            return (
+                <pl-scroll class="pl-virtual-list" onScroll={this.onScroll} ref="scroll">
+                    <div class="pl-virtual-list-strut" style={this.strutStyles}>
+                        <Content class="pl-virtual-list-content" style={this.contentStyles} ref="content" {...{props: this.contentProps || {}}}>
+                            {!!this.renderContent ?
+                                this.renderContent(h, this.targetData) :
+                                (!!this.$scopedSlots.default ? this.targetData.map(({item, index}) => this.$scopedSlots.default({item, index})) : null)}
+                        </Content>
+                    </div>
+                </pl-scroll>
+            )
+        },
         async updated() {
             if (!this.dynamicSize) return
             // 页面渲染完成之后，需要根据当前展示的数据，更新缓存的内容
             await this.$plain.nextTick()
-            const nodes = Array.from(this.content.childNodes || [])
+
+            const content = this.content.$el || this.content
+            const nodes = Array.from(content.childNodes || [])
 
             for (let i = 0; i < nodes.length; i++) {
                 const node = nodes[i];
@@ -132,6 +142,8 @@
                 }
 
                 this.end = this.start + this.p_remain
+
+                this.$emit('scroll')
             },
 
             /*---------------------------------------utils-------------------------------------------*/
diff --git a/src/components/virtual-tree/index.js b/src/components/virtual-tree/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7a916e8ed162368d7a4eed13411873a268412776
--- /dev/null
+++ b/src/components/virtual-tree/index.js
@@ -0,0 +1,5 @@
+import tree from './pl-virtual-tree.tsx'
+import treeNode from './pl-virtual-tree-node'
+import {plugin} from "../../utils";
+
+export default plugin([tree, treeNode])
\ No newline at end of file
diff --git a/src/components/virtual-tree/pl-virtual-tree-node.tsx b/src/components/virtual-tree/pl-virtual-tree-node.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7998e4f26a83adf7b31b962e7a4104168e094b2e
--- /dev/null
+++ b/src/components/virtual-tree/pl-virtual-tree-node.tsx
@@ -0,0 +1,20 @@
+import PlTreeNode from '../tree/pl-tree-node.vue'
+
+export default {
+    name: 'pl-virtual-tree-node',
+    mixins: [PlTreeNode],
+    render(h) {
+        const nodeOn = {
+            ...(!!this.plTree.draggable ? {
+                dragstart: this.plTree.dragState.dragstart,
+                dragend: this.plTree.dragState.dragend,
+                dragover: this.plTree.dragState.dragover,
+            } : {})
+        }
+        return (
+            <pl-item class={this.classes} draggable={this.plTree.draggable} {...{nativeOn: nodeOn}}>
+                {this.getTreeNodeWrapper(h)}
+            </pl-item>
+        )
+    },
+}
\ No newline at end of file
diff --git a/src/components/virtual-tree/pl-virtual-tree.tsx b/src/components/virtual-tree/pl-virtual-tree.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..adf4b010c31ca6a625a8774d23b595ad3b95345f
--- /dev/null
+++ b/src/components/virtual-tree/pl-virtual-tree.tsx
@@ -0,0 +1,93 @@
+import tree from '../tree/pl-tree.vue'
+import {TreeNode} from "../tree/tree";
+import PlVirtualTreeNode from './pl-virtual-tree-node'
+
+const Tree = tree as any
+
+export default {
+    name: "pl-virtual-tree",
+    components: {PlVirtualTreeNode},
+    mixins: [
+        ...Tree.mixins,
+        {
+            provide: Tree.provide,
+            props: Tree.props,
+            data: Tree.data,
+            watch: Tree.watch,
+            created: Tree.created,
+            computed: Tree.computed,
+            methods: Tree.methods,
+        },
+    ],
+    props: {
+        virtual: {type: Boolean},
+        width: {},
+        height: {},
+    },
+    emitters: Tree.emitters,
+    data() {
+        const disabledQueueAnimation = this.$plain.utils.debounce(() => this.virtualScrollFlag = false, 300, true)
+        return {
+            disabledQueueAnimation,
+        }
+    },
+    render(h) {
+        const directives = [{name: 'loading', value: this.isLoading}]
+
+        return (
+            <div {...{directives}} class={this.classes} style={this.styles}>
+                {(!this.formatDataFlat || this.formatDataFlat.length === 0) && (
+                    <div class="pl-tree-node-empty-text"
+                         key="pl-tree-node-empty-text">
+                        <pl-icon icon="el-icon-reading"/>
+                        <span>{this.emptyText}</span>
+                    </div>
+                )}
+                {!!this.draggable && <span class="pl-tree-drag-indicator" key="pl-tree-drag-indicator" {...{directives: [{name: 'show', value: this.dragState.show}]}} style={this.indicatorStyles}></span>}
+
+                {!!this.virtual ?
+                    <pl-virtual-list data={this.formatDataFlat}
+                                     size={24}
+                                     contentIs={this.virtualScrollFlag ? 'div' : 'pl-list'}
+                                     contentProps={{direction: "right"}}
+                                     onScroll={this.onVirtualScroll}
+                                     {...{
+                                         scopedSlots: {default: ({item, index}) => <pl-virtual-tree-node treeNode={item} key={item.key} vid={index}/>}
+                                     }}/> :
+                    <pl-list direction="right">
+                        {this.formatDataFlat.map((item) => <pl-virtual-tree-node treeNode={item} key={item.key}/>)}
+                    </pl-list>
+                }
+            </div>
+        )
+    },
+    computed: {
+        styles() {
+            const styles = {} as any
+            if (!!this.width) styles.width = this.width
+            if (!!this.height) styles.height = this.height
+            return styles
+        },
+        /**
+         * formatData偏平格式化
+         * @author  韦胜健
+         * @date    2020/4/2 9:58
+         */
+        formatDataFlat() {
+            const formatData = this.formatData
+            const formatDataFlat = []
+            this.iterateAll(formatData, (treeNode: TreeNode) => {
+                formatDataFlat.push(treeNode)
+            }, (treeNode: TreeNode) => {
+                return treeNode.isExpand === true
+            })
+            return formatDataFlat.filter((treeNode: TreeNode) => !!treeNode.isVisible)
+        },
+    },
+    methods: {
+        onVirtualScroll() {
+            this.virtualScrollFlag = true
+            this.disabledQueueAnimation()
+        },
+    },
+}
\ No newline at end of file
diff --git a/src/styles/components/components/list.scss b/src/styles/components/components/list.scss
index 35bc0bc174eabdfc300f951e29b8ac689c72c293..33550c4df3ac59b8c52f33469dec5e3370187786 100644
--- a/src/styles/components/components/list.scss
+++ b/src/styles/components/components/list.scss
@@ -32,10 +32,15 @@
   );
 
   @each $key, $value in $directions {
-    .pl-list-move-#{$key}-enter, .pl-list-move-#{$key}-leave-to {
+    .pl-list-move-#{$key}-enter {
       opacity: 0;
       transform: translateX(map_get($value, x)) translateY(map_get($value, y));
     }
+
+    .pl-list-move-#{$key}-leave-to {
+      opacity: 0;
+    }
+
     .pl-list-move-#{$key}-leave-active {
       position: absolute;
     }