diff --git a/examples/Feature.vue b/examples/Feature.vue
index d6fa112..6c48fec 100644
--- a/examples/Feature.vue
+++ b/examples/Feature.vue
@@ -147,7 +147,7 @@
           <div style="height: 300px">
             <VTree
               :data="showLineTreeData"
-              :showLine="{ type: showLineType, polyline: showLinePolyline }"
+              :showLine="{ type: showLineType, polyline: showLinePolyline, dashDensity }"
               defaultExpandAll
               animation
             />
@@ -169,6 +169,9 @@
               {{ showLineType }}
             </button>
             <p>当前连接线类型：{{showLineType}}</p>
+            <p v-if="showLineType === 'dashed'">
+              虚线密度：<input type="range" v-model.number="dashDensity" :min="1" :max="10" :step="1" /> {{ dashDensity }}
+            </p>
           </div>
           <div class="desc-block">
             showLine.polyline:
@@ -437,6 +440,8 @@ export default defineComponent({
       showLineType.value = type
     }
 
+    const dashDensity = ref(3)
+
     const showLinePolyline = ref(false)
     const onShowLinePolylineBtnClick = (polyline: boolean) => {
       showLinePolyline.value = polyline
@@ -485,6 +490,7 @@ export default defineComponent({
       onShowLineTypeBtnClick,
       showLinePolyline,
       onShowLinePolylineBtnClick,
+      dashDensity,
 
       // 自定义节点
       nodeSlotDescText,
diff --git a/package.json b/package.json
index 1e0297e..8733626 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wsfe/vue-tree",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "types": "./types",
   "description": "A vue tree component using virtual list.",
   "main": "./dist/vue-tree.umd.js",
@@ -67,7 +67,6 @@
     "@vue/repl": "^4.3.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
-    "@wsfe/vue-tree": "^4.0.1",
     "autoprefixer": "^10.4.19",
     "happy-dom": "^14.12.0",
     "less": "^4.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 776b06c..30fc4a4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,9 +29,6 @@ devDependencies:
   '@vue/vue3-jest':
     specifier: ^29.2.6
     version: 29.2.6(@babel/core@7.24.7)(babel-jest@29.7.0)(jest@29.7.0)(typescript@5.4.5)(vue@3.4.30)
-  '@wsfe/vue-tree':
-    specifier: ^4.0.1
-    version: 4.0.1
   autoprefixer:
     specifier: ^10.4.19
     version: 10.4.19(postcss@8.4.38)
@@ -2862,10 +2859,6 @@ packages:
       - vue
     dev: true
 
-  /@wsfe/vue-tree@4.0.1:
-    resolution: {integrity: sha512-B3a1bddMfvv2Nzjsw12EOID3ccvvPDiT1GSLY/LFP/S36EvvmMbR5giIj6yhigSpTYNF4j6ORiowMxpwM1Rt6w==}
-    dev: true
-
   /abbrev@2.0.0:
     resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
diff --git a/site/.vitepress/code/ShowLine.vue b/site/.vitepress/code/ShowLine.vue
index d2af7d0..606c192 100644
--- a/site/.vitepress/code/ShowLine.vue
+++ b/site/.vitepress/code/ShowLine.vue
@@ -19,6 +19,12 @@
       <input type="radio" id="showline-polyline-false" :value="false" v-model="polyline" />
       <label for="showline-polyline-false">false</label>
     </div>
+
+    <div v-if="type === 'dashed'">
+      <span>showLine.dashDensity: </span>
+      <input type="range" :min="1" :max="10" :step="1" v-model.number="dashDensity" />
+      <span>{{ dashDensity }}</span>
+    </div>
   </div>
   <VTree :data="data" :showLine="showLine" animation defaultExpandAll />
 </template>
@@ -29,11 +35,13 @@ import VTree from '@wsfe/vue-tree'
 
 const type = ref('solid')
 const polyline = ref(false)
+const dashDensity = ref(3)
 
 const showLine = computed(() => {
   return {
     type: type.value,
     polyline: polyline.value,
+    dashDensity: dashDensity.value,
   }
 })
 
diff --git a/site/.vitepress/components/PlaygroundLink.vue b/site/.vitepress/components/PlaygroundLink.vue
index 7c56621..518908c 100644
--- a/site/.vitepress/components/PlaygroundLink.vue
+++ b/site/.vitepress/components/PlaygroundLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <a :href="withBase(`/playground${serializedCode}`)" target="_blank" rel="noreferrer noopener">{{ text || i18n.openInPlayground }}</a>
+  <a :href="withBase('/playground') + serializedCode" target="_blank" rel="noreferrer noopener">{{ text || i18n.openInPlayground }}</a>
 </template>
 
 <script setup lang="ts">
diff --git a/site/.vitepress/config.mts b/site/.vitepress/config.mts
index d0c7ea9..bdc6c04 100644
--- a/site/.vitepress/config.mts
+++ b/site/.vitepress/config.mts
@@ -1,3 +1,4 @@
+import path from 'node:path'
 import { defineConfig } from 'vitepress'
 import zh from './zh.mjs'
 import en from './en.mjs'
@@ -31,6 +32,14 @@ export default defineConfig({
       { icon: 'github', link: 'https://github.com/wsfe/vue-tree' }
     ]
   },
+  vite: {
+    resolve: {
+      alias: {
+        '@wsfe/vue-tree/style.css': path.resolve('src/styles/index.less'),
+        '@wsfe/vue-tree': path.resolve('src'),
+      },
+    },
+  },
 
   locales: {
     root: {
diff --git a/site/api/vtree.md b/site/api/vtree.md
index 31e691f..41d6d34 100644
--- a/site/api/vtree.md
+++ b/site/api/vtree.md
@@ -3,43 +3,43 @@
 
 ## VTree Props
 
-| 属性                             | 说明                                                                                                          | 类型                                                                                                             | 默认值                                                                                              |
-| :------------------------------- | :------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- |
-| value                            | 选中的值，可用 v-model ；单选为字符串或数字，多选为 `separator` 分隔的字符串或数组，优先多选                  | `string \| number \| Array<string \| number>`                                                                    | 无                                                                                                  |
-| data                             | 传入的树数据。数据量大时，不建议通过 props 传入数据，建议用 `setData` 方法代替                                | `object[]`                                                                                                       | []                                                                                                  |
-| unloadDataList                   | 供未加载且选中节点查询 title 字段值用的列表，格式与 `data` 一致即可                                           | `object[]`                                                                                                       | []                                                                                                  |
-| showUnloadCheckedNodes           | 过滤已选时是否在列表后面展示未加载的已选节点                                                                  | `boolean`                                                                                                        | true                                                                                                |
-| emptyText                        | 数据为空时显示的文本                                                                                          | `string`                                                                                                         | '暂无数据'                                                                                          |
-| titleField                       | 节点标题字段                                                                                                  | `string`                                                                                                         | 'title'                                                                                             |
-| keyField                         | 节点唯一标识字段                                                                                              | `string`                                                                                                         | 'id'                                                                                                |
-| separator                        | 多选模式下 value 分隔符                                                                                       | `string`                                                                                                         | ','                                                                                                 |
-| checkable                        | 是否可多选                                                                                                    | `boolean`                                                                                                        | false                                                                                               |
-| selectable                       | 是否可单选                                                                                                    | `boolean`                                                                                                        | false                                                                                               |
-| filteredNodeCheckable            | 是否可勾选被过滤节点                                                                                          | `boolean`                                                                                                        | false                                                                                               |
-| cascade                          | 父子节点是否关联                                                                                              | `boolean`                                                                                                        | true                                                                                                |
-| enableLeafOnly                   | 是否只启用子节点，当 `多选且父子不关联` 或 `单选` 时有效                                                      | `boolean`                                                                                                        | false                                                                                               |
-| disableAll                       | 是否禁用所有节点                                                                                              | `boolean`                                                                                                        | false                                                                                               |
-| defaultExpandAll                 | 是否默认展开所有节点                                                                                          | `boolean`                                                                                                        | false                                                                                               |
-| defaultExpandedKeys `Deprecated` | 默认展开的节点 key                                                                                            | `Array<string \| number>`                                                                                        | []                                                                                                  |
-| expandedKeys `2.2.0`             | 展开的节点 key ，组件内部将会响应此 Prop 的变化                                                               | `Array<string \| number>`                                                                                        | []                                                                                                  |
-| draggable                        | 是否可拖拽                                                                                                    | `boolean`                                                                                                        | false                                                                                               |
-| droppable                        | 是否可放置                                                                                                    | `boolean`                                                                                                        | false                                                                                               |
-| beforeDropMethod                 | 在放置节点之前执行的方法，返回 true 允许放置， false 可阻止放置                                               | `(dragKey: string \| number, dropKey: string \| number, hoverPart: 'before' \| 'body' \| 'after') => boolean`    | `() => true`                                                                                        |
-| ignoreMode                       | 忽略模式，指定 `getCheckedNodes`, `getCheckedKeys` 与 `v-model` 默认要忽略的部分                              | `'none' \| 'parents' \| 'children'`                                                                              | 'none'                                                                                              |
-| autoLoad                         | 异步加载初始化时是否自动加载根节点                                                                            | `boolean`                                                                                                        | true                                                                                                |
-| load                             | 异步加载方法                                                                                                  | `(node: null \| TreeNode, resolve: Function, reject: Function) => any`                                           | 无                                                                                                  |
-| render                           | 节点渲染 render 函数                                                                                          | `(h: CreateElement, node: TreeNode) => VNode`                                                                    | 无                                                                                                  |
-| filterMethod                     | 节点过滤方法                                                                                                  | `(keyword: string, node: TreeNode) => boolean`                                                                   | 无                                                                                                  |
-| expandOnFilter `2.1.0`           | 过滤时是否展开所有可见节点                                                                                    | `boolean`                                                                                                        | true                                                                                                |
-| unselectOnClick `2.1.0`          | 点击已选中节点是否取消选中                                                                                    | `boolean`                                                                                                        | true                                                                                                |
-| loading                          | 是否显示 loading 图标                                                                                         | `boolean`                                                                                                        | false                                                                                               |
-| nodeClassName                    | 节点根元素的 class ，传入函数以对每个节点定制 class                                                           | `string \| object \| Array<string \| object> \| (node: TreeNode) => string \| object \| Array<string \| object>` | 无                                                                                                  |
-| showLine `4.0.0`                 | 是否显示连接线，可指定连接线的宽度、颜色、实线、虚线，以及是否有折线                                          | `boolean \| { width?: number, type?: 'dashed' \| 'solid', color?: string, polyline?: boolean }`                  | 无，如果传入的非 boolean，则默认为 `{ width: 1, type: 'solid', color: '#D3D3D3', polyline: false }` |
-| animation `4.0.0`                | 是否启用过渡动画，目前仅控制展开收起                                                                          | `boolean`                                                                                                        | 无                                                                                                  |
-| nodeMinHeight                    | 根据节点最小高度计算数据总高度                                                                                | `number`                                                                                                         | 30                                                                                                  |
-| nodeIndent                       | 子节点缩进                                                                                                    | `number`                                                                                                         | 20                                                                                                  |
-| renderNodeAmount                 | 渲染节点数量，可见节点数大于此值且高度超过(容器可视高度能容纳节点数 + bufferNodeAmount)则不会渲染所有可见节点 | `number`                                                                                                         | 100                                                                                                 |
-| bufferNodeAmount                 | 当滚动到视野外的节点个数大于此值时刷新渲染节点                                                                | `number`                                                                                                         | 20                                                                                                  |
+| 属性                             | 说明                                                                                                                  | 类型                                                                                                                  | 默认值                                                                                                              |
+| :------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ |
+| value                            | 选中的值，可用 v-model ；单选为字符串或数字，多选为 `separator` 分隔的字符串或数组，优先多选                          | `string \| number \| Array<string \| number>`                                                                         | 无                                                                                                                  |
+| data                             | 传入的树数据。数据量大时，不建议通过 props 传入数据，建议用 `setData` 方法代替                                        | `object[]`                                                                                                            | []                                                                                                                  |
+| unloadDataList                   | 供未加载且选中节点查询 title 字段值用的列表，格式与 `data` 一致即可                                                   | `object[]`                                                                                                            | []                                                                                                                  |
+| showUnloadCheckedNodes           | 过滤已选时是否在列表后面展示未加载的已选节点                                                                          | `boolean`                                                                                                             | true                                                                                                                |
+| emptyText                        | 数据为空时显示的文本                                                                                                  | `string`                                                                                                              | '暂无数据'                                                                                                          |
+| titleField                       | 节点标题字段                                                                                                          | `string`                                                                                                              | 'title'                                                                                                             |
+| keyField                         | 节点唯一标识字段                                                                                                      | `string`                                                                                                              | 'id'                                                                                                                |
+| separator                        | 多选模式下 value 分隔符                                                                                               | `string`                                                                                                              | ','                                                                                                                 |
+| checkable                        | 是否可多选                                                                                                            | `boolean`                                                                                                             | false                                                                                                               |
+| selectable                       | 是否可单选                                                                                                            | `boolean`                                                                                                             | false                                                                                                               |
+| filteredNodeCheckable            | 是否可勾选被过滤节点                                                                                                  | `boolean`                                                                                                             | false                                                                                                               |
+| cascade                          | 父子节点是否关联                                                                                                      | `boolean`                                                                                                             | true                                                                                                                |
+| enableLeafOnly                   | 是否只启用子节点，当 `多选且父子不关联` 或 `单选` 时有效                                                              | `boolean`                                                                                                             | false                                                                                                               |
+| disableAll                       | 是否禁用所有节点                                                                                                      | `boolean`                                                                                                             | false                                                                                                               |
+| defaultExpandAll                 | 是否默认展开所有节点                                                                                                  | `boolean`                                                                                                             | false                                                                                                               |
+| defaultExpandedKeys `Deprecated` | 默认展开的节点 key                                                                                                    | `Array<string \| number>`                                                                                             | []                                                                                                                  |
+| expandedKeys `2.2.0`             | 展开的节点 key ，组件内部将会响应此 Prop 的变化                                                                       | `Array<string \| number>`                                                                                             | []                                                                                                                  |
+| draggable                        | 是否可拖拽                                                                                                            | `boolean`                                                                                                             | false                                                                                                               |
+| droppable                        | 是否可放置                                                                                                            | `boolean`                                                                                                             | false                                                                                                               |
+| beforeDropMethod                 | 在放置节点之前执行的方法，返回 true 允许放置， false 可阻止放置                                                       | `(dragKey: string \| number, dropKey: string \| number, hoverPart: 'before' \| 'body' \| 'after') => boolean`         | `() => true`                                                                                                        |
+| ignoreMode                       | 忽略模式，指定 `getCheckedNodes`, `getCheckedKeys` 与 `v-model` 默认要忽略的部分                                      | `'none' \| 'parents' \| 'children'`                                                                                   | 'none'                                                                                                              |
+| autoLoad                         | 异步加载初始化时是否自动加载根节点                                                                                    | `boolean`                                                                                                             | true                                                                                                                |
+| load                             | 异步加载方法                                                                                                          | `(node: null \| TreeNode, resolve: Function, reject: Function) => any`                                                | 无                                                                                                                  |
+| render                           | 节点渲染 render 函数                                                                                                  | `(h: CreateElement, node: TreeNode) => VNode`                                                                         | 无                                                                                                                  |
+| filterMethod                     | 节点过滤方法                                                                                                          | `(keyword: string, node: TreeNode) => boolean`                                                                        | 无                                                                                                                  |
+| expandOnFilter `2.1.0`           | 过滤时是否展开所有可见节点                                                                                            | `boolean`                                                                                                             | true                                                                                                                |
+| unselectOnClick `2.1.0`          | 点击已选中节点是否取消选中                                                                                            | `boolean`                                                                                                             | true                                                                                                                |
+| loading                          | 是否显示 loading 图标                                                                                                 | `boolean`                                                                                                             | false                                                                                                               |
+| nodeClassName                    | 节点根元素的 class ，传入函数以对每个节点定制 class                                                                   | `string \| object \| Array<string \| object> \| (node: TreeNode) => string \| object \| Array<string \| object>`      | 无                                                                                                                  |
+| showLine `4.0.0`                 | 是否显示连接线，可指定连接线的宽度、颜色、实线、虚线，以及是否有折线；虚线密度 dashDensity `4.1.0` 类型为 1-10 的整数 | `boolean \| { width?: number, type?: 'dashed' \| 'solid', color?: string, polyline?: boolean, dashDensity?: number }` | 无，如果传入的非 boolean，则默认为 `{ width: 1, type: 'solid', color: '#D3D3D3', polyline: false, dashDensity: 3 }` |
+| animation `4.0.0`                | 是否启用过渡动画，目前仅控制展开收起                                                                                  | `boolean`                                                                                                             | 无                                                                                                                  |
+| nodeMinHeight                    | 根据节点最小高度计算数据总高度                                                                                        | `number`                                                                                                              | 30                                                                                                                  |
+| nodeIndent                       | 子节点缩进                                                                                                            | `number`                                                                                                              | 20                                                                                                                  |
+| renderNodeAmount                 | 渲染节点数量，可见节点数大于此值且高度超过(容器可视高度能容纳节点数 + bufferNodeAmount)则不会渲染所有可见节点         | `number`                                                                                                              | 100                                                                                                                 |
+| bufferNodeAmount                 | 当滚动到视野外的节点个数大于此值时刷新渲染节点                                                                        | `number`                                                                                                              | 20                                                                                                                  |
 
 ## VTree Events
 
diff --git a/site/en/api/vtree.md b/site/en/api/vtree.md
index 8106f40..ef725a0 100644
--- a/site/en/api/vtree.md
+++ b/site/en/api/vtree.md
@@ -3,43 +3,43 @@
 
 ## VTree Props
 
-| Prop                             | Description                                                                                                                                                                                                          | Type                                                                                                             | Default Value                                                                                               |
-| :------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------- |
-| value                            | Selected or checked value. Supports `v-model`. `value` will be a string or number in single select mode; a `separator` separated string or an array in multiple select mode. Multiple select mode takes the priority | `string \| number \| Array<string \| number>`                                                                    | None                                                                                                        |
-| data                             | Tree data. It's recommended to use `setData` method instead of props when the data amount is large                                                                                                                   | `object[]`                                                                                                       | []                                                                                                          |
-| unloadDataList                   | The list for querying node title of not loaded but selected nodes. The format is the same as `data`                                                                                                                  | `object[]`                                                                                                       | []                                                                                                          |
-| showUnloadCheckedNodes           | Whether to show checked nodes that are not loaded after filter                                                                                                                                                       | `boolean`                                                                                                        | true                                                                                                        |
-| emptyText                        | No data text                                                                                                                                                                                                         | `string`                                                                                                         | '暂无数据'                                                                                                  |
-| titleField                       | Node title field                                                                                                                                                                                                     | `string`                                                                                                         | 'title'                                                                                                     |
-| keyField                         | Node unique key field                                                                                                                                                                                                | `string`                                                                                                         | 'id'                                                                                                        |
-| separator                        | Separator of `value` in multiple select mode                                                                                                                                                                         | `string`                                                                                                         | ','                                                                                                         |
-| checkable                        | Enable multiple select                                                                                                                                                                                               | `boolean`                                                                                                        | false                                                                                                       |
-| selectable                       | Enable single select                                                                                                                                                                                                 | `boolean`                                                                                                        | false                                                                                                       |
-| filteredNodeCheckable            | Whether the filtered nodes can be checked                                                                                                                                                                            | `boolean`                                                                                                        | false                                                                                                       |
-| cascade                          | Whether parent nodes and child nodes are cascaded                                                                                                                                                                    | `boolean`                                                                                                        | true                                                                                                        |
-| enableLeafOnly                   | Whether to enable leaf nodes only. Effective when 'in multiple select mode and cascade is false' or 'in single select mode'                                                                                          | `boolean`                                                                                                        | false                                                                                                       |
-| disableAll                       | Whether to disable all nodes                                                                                                                                                                                         | `boolean`                                                                                                        | false                                                                                                       |
-| defaultExpandAll                 | Whether to expand all nodes by default                                                                                                                                                                               | `boolean`                                                                                                        | false                                                                                                       |
-| defaultExpandedKeys `Deprecated` | Default expanded keys                                                                                                                                                                                                | `Array<string \| number>`                                                                                        | []                                                                                                          |
-| expandedKeys `2.2.0`             | Expanded node keys. The component will react to the changes of this prop                                                                                                                                             | `Array<string \| number>`                                                                                        | []                                                                                                          |
-| draggable                        | Whether nodes can be dragged                                                                                                                                                                                         | `boolean`                                                                                                        | false                                                                                                       |
-| droppable                        | Whether nodes can be dropped                                                                                                                                                                                         | `boolean`                                                                                                        | false                                                                                                       |
-| beforeDropMethod                 | This method will be invoked before node drop. Return `true` to allow dropping. Return `false` to prevent from dropping                                                                                               | `(dragKey: string \| number, dropKey: string \| number, hoverPart: 'before' \| 'body' \| 'after') => boolean`    | `() => true`                                                                                                |
-| ignoreMode                       | Specify the nodes to ignore in `getCheckedNodes`, `getCheckedKeys` and `v-model`                                                                                                                                     | `'none' \| 'parents' \| 'children'`                                                                              | 'none'                                                                                                      |
-| autoLoad                         | Whether to auto load root nodes when init                                                                                                                                                                            | `boolean`                                                                                                        | true                                                                                                        |
-| load                             | async load method                                                                                                                                                                                                    | `(node: null \| TreeNode, resolve: Function, reject: Function) => any`                                           | None                                                                                                        |
-| render                           | Node render function                                                                                                                                                                                                 | `(h: CreateElement, node: TreeNode) => VNode`                                                                    | None                                                                                                        |
-| filterMethod                     | Node filter method                                                                                                                                                                                                   | `(keyword: string, node: TreeNode) => boolean`                                                                   | None                                                                                                        |
-| expandOnFilter `2.1.0`           | Whether to expand all visible nodes when filter                                                                                                                                                                      | `boolean`                                                                                                        | true                                                                                                        |
-| unselectOnClick `2.1.0`          | Whether to cancel select when click on selected node                                                                                                                                                                 | `boolean`                                                                                                        | true                                                                                                        |
-| loading                          | Whether to show loading icon                                                                                                                                                                                         | `boolean`                                                                                                        | false                                                                                                       |
-| nodeClassName                    | Class passed to the root element of the node. Pass a function to customize class for each node                                                                                                                       | `string \| object \| Array<string \| object> \| (node: TreeNode) => string \| object \| Array<string \| object>` | None                                                                                                        |
-| showLine `4.0.0`                 | Whether to show connecting lines. Pass object to specify line width, color, type and polyline                                                                                                                        | `boolean \| { width?: number, type?: 'dashed' \| 'solid', color?: string, polyline?: boolean }`                  | None. If not boolean, the default value is `{ width: 1, type: 'solid', color: '#D3D3D3', polyline: false }` |
-| animation `4.0.0`                | Whether to enable transition animation. This prop only controls expand/collapse animation currently                                                                                                                  | `boolean`                                                                                                        | None                                                                                                        |
-| nodeMinHeight                    | Calculate data total height according to node min height                                                                                                                                                             | `number`                                                                                                         | 30                                                                                                          |
-| nodeIndent                       | Child node indent                                                                                                                                                                                                    | `number`                                                                                                         | 20                                                                                                          |
-| renderNodeAmount                 | Node amount to render. Not all visible nodes will be rendered when they are more than this prop and the height is more than (node amount the container clientHeight can hold + bufferNodeAmount)                     | `number`                                                                                                         | 100                                                                                                         |
-| bufferNodeAmount                 | Refresh render nodes when scrolled node amount is more than this prop                                                                                                                                                | `number`                                                                                                         | 20                                                                                                          |
+| Prop                             | Description                                                                                                                                                                                                          | Type                                                                                                                  | Default Value                                                                                                               |
+| :------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- |
+| value                            | Selected or checked value. Supports `v-model`. `value` will be a string or number in single select mode; a `separator` separated string or an array in multiple select mode. Multiple select mode takes the priority | `string \| number \| Array<string \| number>`                                                                         | None                                                                                                                        |
+| data                             | Tree data. It's recommended to use `setData` method instead of props when the data amount is large                                                                                                                   | `object[]`                                                                                                            | []                                                                                                                          |
+| unloadDataList                   | The list for querying node title of not loaded but selected nodes. The format is the same as `data`                                                                                                                  | `object[]`                                                                                                            | []                                                                                                                          |
+| showUnloadCheckedNodes           | Whether to show checked nodes that are not loaded after filter                                                                                                                                                       | `boolean`                                                                                                             | true                                                                                                                        |
+| emptyText                        | No data text                                                                                                                                                                                                         | `string`                                                                                                              | '暂无数据'                                                                                                                  |
+| titleField                       | Node title field                                                                                                                                                                                                     | `string`                                                                                                              | 'title'                                                                                                                     |
+| keyField                         | Node unique key field                                                                                                                                                                                                | `string`                                                                                                              | 'id'                                                                                                                        |
+| separator                        | Separator of `value` in multiple select mode                                                                                                                                                                         | `string`                                                                                                              | ','                                                                                                                         |
+| checkable                        | Enable multiple select                                                                                                                                                                                               | `boolean`                                                                                                             | false                                                                                                                       |
+| selectable                       | Enable single select                                                                                                                                                                                                 | `boolean`                                                                                                             | false                                                                                                                       |
+| filteredNodeCheckable            | Whether the filtered nodes can be checked                                                                                                                                                                            | `boolean`                                                                                                             | false                                                                                                                       |
+| cascade                          | Whether parent nodes and child nodes are cascaded                                                                                                                                                                    | `boolean`                                                                                                             | true                                                                                                                        |
+| enableLeafOnly                   | Whether to enable leaf nodes only. Effective when 'in multiple select mode and cascade is false' or 'in single select mode'                                                                                          | `boolean`                                                                                                             | false                                                                                                                       |
+| disableAll                       | Whether to disable all nodes                                                                                                                                                                                         | `boolean`                                                                                                             | false                                                                                                                       |
+| defaultExpandAll                 | Whether to expand all nodes by default                                                                                                                                                                               | `boolean`                                                                                                             | false                                                                                                                       |
+| defaultExpandedKeys `Deprecated` | Default expanded keys                                                                                                                                                                                                | `Array<string \| number>`                                                                                             | []                                                                                                                          |
+| expandedKeys `2.2.0`             | Expanded node keys. The component will react to the changes of this prop                                                                                                                                             | `Array<string \| number>`                                                                                             | []                                                                                                                          |
+| draggable                        | Whether nodes can be dragged                                                                                                                                                                                         | `boolean`                                                                                                             | false                                                                                                                       |
+| droppable                        | Whether nodes can be dropped                                                                                                                                                                                         | `boolean`                                                                                                             | false                                                                                                                       |
+| beforeDropMethod                 | This method will be invoked before node drop. Return `true` to allow dropping. Return `false` to prevent from dropping                                                                                               | `(dragKey: string \| number, dropKey: string \| number, hoverPart: 'before' \| 'body' \| 'after') => boolean`         | `() => true`                                                                                                                |
+| ignoreMode                       | Specify the nodes to ignore in `getCheckedNodes`, `getCheckedKeys` and `v-model`                                                                                                                                     | `'none' \| 'parents' \| 'children'`                                                                                   | 'none'                                                                                                                      |
+| autoLoad                         | Whether to auto load root nodes when init                                                                                                                                                                            | `boolean`                                                                                                             | true                                                                                                                        |
+| load                             | async load method                                                                                                                                                                                                    | `(node: null \| TreeNode, resolve: Function, reject: Function) => any`                                                | None                                                                                                                        |
+| render                           | Node render function                                                                                                                                                                                                 | `(h: CreateElement, node: TreeNode) => VNode`                                                                         | None                                                                                                                        |
+| filterMethod                     | Node filter method                                                                                                                                                                                                   | `(keyword: string, node: TreeNode) => boolean`                                                                        | None                                                                                                                        |
+| expandOnFilter `2.1.0`           | Whether to expand all visible nodes when filter                                                                                                                                                                      | `boolean`                                                                                                             | true                                                                                                                        |
+| unselectOnClick `2.1.0`          | Whether to cancel select when click on selected node                                                                                                                                                                 | `boolean`                                                                                                             | true                                                                                                                        |
+| loading                          | Whether to show loading icon                                                                                                                                                                                         | `boolean`                                                                                                             | false                                                                                                                       |
+| nodeClassName                    | Class passed to the root element of the node. Pass a function to customize class for each node                                                                                                                       | `string \| object \| Array<string \| object> \| (node: TreeNode) => string \| object \| Array<string \| object>`      | None                                                                                                                        |
+| showLine `4.0.0`                 | Whether to show connecting lines. Pass object to specify line width, color, type and polyline. The density of dash dashDensity `4.1.0` ranges from 1 to 10                                                           | `boolean \| { width?: number, type?: 'dashed' \| 'solid', color?: string, polyline?: boolean, dashDensity?: number }` | None. If not boolean, the default value is `{ width: 1, type: 'solid', color: '#D3D3D3', polyline: false, dashDensity: 3 }` |
+| animation `4.0.0`                | Whether to enable transition animation. This prop only controls expand/collapse animation currently                                                                                                                  | `boolean`                                                                                                             | None                                                                                                                        |
+| nodeMinHeight                    | Calculate data total height according to node min height                                                                                                                                                             | `number`                                                                                                              | 30                                                                                                                          |
+| nodeIndent                       | Child node indent                                                                                                                                                                                                    | `number`                                                                                                              | 20                                                                                                                          |
+| renderNodeAmount                 | Node amount to render. Not all visible nodes will be rendered when they are more than this prop and the height is more than (node amount the container clientHeight can hold + bufferNodeAmount)                     | `number`                                                                                                              | 100                                                                                                                         |
+| bufferNodeAmount                 | Refresh render nodes when scrolled node amount is more than this prop                                                                                                                                                | `number`                                                                                                              | 20                                                                                                                          |
 
 ## VTree Events
 
diff --git a/src/components/TreeNode.vue b/src/components/TreeNode.vue
index 5966349..747e28d 100644
--- a/src/components/TreeNode.vue
+++ b/src/components/TreeNode.vue
@@ -10,9 +10,9 @@
             width: `${nodeIndent}px`,
           }"
         >
-          <polyline
+          <path
             fill="none"
-            :points="polylinePoints(index === data._level - 1)"
+            :d="polylinePoints(index === data._level - 1)"
             :stroke-width="strokeWidth"
             :stroke="showLineParams.color"
             :stroke-dasharray="strokeDasharray"
@@ -114,14 +114,21 @@ const showLineParams = computed(() => {
     type: showLineType.solid,
     color: '#D3D3D3',
     polyline: false,
+    dashDensity: 3,
   }
   let params: Required<ShowLine> = defaultParams
   if (typeof props.showLine === 'object') {
+    let dashDensity = defaultParams.dashDensity
+    if (typeof props.showLine.dashDensity === 'number' && props.showLine.dashDensity >= 1 && props.showLine.dashDensity <= 10) {
+      dashDensity = props.showLine.dashDensity
+    }
+
     params = {
       width: props.showLine.width ?? defaultParams.width,
       type: props.showLine.type ?? defaultParams.type,
       color: props.showLine.color ?? defaultParams.color,
       polyline: props.showLine.polyline ?? defaultParams.polyline,
+      dashDensity,
     }
   }
   return params
@@ -132,7 +139,7 @@ const strokeWidth = computed(() => showLineParams.value.width * 100 / props.node
 const strokeDasharray = computed(() => {
   switch (showLineParams.value.type) {
     case showLineType.dashed:
-      return '25'
+      return 100 / (showLineParams.value.dashDensity * 2)
     default:
       break
   }
@@ -140,10 +147,10 @@ const strokeDasharray = computed(() => {
 })
 
 const polylinePoints = (isDirectParentLine: boolean) => {
-  if (!showLineParams.value.polyline || !isDirectParentLine) return '50,0 50,100'
+  if (!showLineParams.value.polyline || !isDirectParentLine) return 'M50,0 L50,100'
   const parent = props.getNode(props.data[props.keyField])?._parent
-  if (parent && props.noSiblingNodeMap[parent[props.keyField]] && props.noSiblingNodeMap[props.data[props.keyField]]) return '50,0 50,50 100,50 50,50'
-  return '50,0 50,50 100,50 50,50 50,100'
+  if (parent && props.noSiblingNodeMap[parent[props.keyField]] && props.noSiblingNodeMap[props.data[props.keyField]]) return 'M50,0 L50,50 M100,50 L50,50'
+  return 'M50,0 L50,100 M100,50 L50,50'
 }
 
 const {
diff --git a/src/types/index.ts b/src/types/index.ts
index 48de6cf..b72e1b6 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -31,10 +31,18 @@ export interface INonReactiveData {
   blockNodes: TreeNode[]
 }
 
+// Utils to generate types like 1 | 2 | 3
+type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
+  ? Acc[number]
+  : Enumerate<N, [...Acc, Acc['length']]>
+
+type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>
+
 export interface ShowLine {
   /** 连接线宽度，svg stroke-width， 默认 1px */
   width?: number
   type?: showLineType
   color?: string
   polyline?: boolean
+  dashDensity?: IntRange<1, 11>
 }