Skip to content

Commit 5726f77

Browse files
angrytoroangrytoro
committed
chore: 格式化README
1 parent c3488b4 commit 5726f77

File tree

1 file changed

+40
-33
lines changed

1 file changed

+40
-33
lines changed

‎README.md‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
# Vue-Tree 3.x
2-
一款高性能vue虚拟树控件，支持搜索，定位，拖拽等。该控件是在公司业务的基础上不断打磨出来的，提供了十分丰富强大的API，几乎能够满足你对树控件的所有需求。该控件同时支持vue2以及vue3。
3-
> 这是原先[ctree](https://github.com/wsfe/vue-tree/tree/2.x)的升级版本，同时支持vue2和vue3。
4-
新版改变了包的名称和部分export模块名称。
2+
3+
一款高性能 vue 虚拟树控件，支持搜索，定位，拖拽等。该控件是在公司业务的基础上不断打磨出来的，提供了十分丰富强大的 API，几乎能够满足你对树控件的所有需求。该控件同时支持 vue2 以及 vue3。
4+
5+
> 这是原先[ctree](https://github.com/wsfe/vue-tree/tree/2.x)的升级版本，同时支持 vue2 和 vue3。
6+
> 新版改变了包的名称和部分 export 模块名称。
7+
58
## 案例
6-
[在线 demo](https://wsfe.github.io/vue-ctree/)
9+
10+
[在线 demo](https://wsfe.github.io/vue-tree/)
711

812
## 安装
913

@@ -34,18 +38,21 @@ npm install @wsfe/vue-tree
3438
```
3539

3640
### 使用方式
41+
3742
```typescript
3843
// 大家可以根据需要是否引入VTreeNode, VTreeSearch, VTreeDrop
39-
import Vtree, {VTreeNode, VTreeSearch, VTreeDrop} from '@wsfe/vue-tree'
44+
import Vtree, { VTreeNode, VTreeSearch, VTreeDrop } from '@wsfe/vue-tree'
4045
import '@wsfe/vue-tree/dist/style.css'
4146
```
47+
4248
# 接口文档
49+
4350
## VTree API
4451

4552
### VTree Props
4653

4754
| 属性 | 说明 | 类型 | 默认值 |
48-
|:---------------------------------|:--------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------|:-------------|
55+
| :------------------------------- | :------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------- | :----------- |
4956
| value | 选中的值，可用 v-model ；单选为字符串或数字，多选为 `separator` 分隔的字符串或数组，优先多选 | `string \| number \| Array<string \| number>` | 无 |
5057
| data | 传入的树数据。数据量大时，不建议通过 props 传入数据，建议用 `setData` 方法代替 | `object[]` | [] |
5158
| unloadDataList | 供未加载且选中节点查询 title 字段值用的列表，格式与 `data` 一致即可 | `object[]` | [] |
@@ -85,7 +92,7 @@ import '@wsfe/vue-tree/dist/style.css'
8592
注：从 `2.0.8` 起，事件中返回的节点信息都是包括 `_parent` 与 `children` 的完整节点信息（拖拽事件的 `dataTransfer` 除外）。
8693

8794
| 事件名 | 说明 | 返回值 |
88-
|:-----------------|:----------------------------|:----------------------------------------------------------------------------|
95+
| :--------------- | :-------------------------- | :-------------------------------------------------------------------------- |
8996
| input | 选中节点改变时触发 | 选中的节点 |
9097
| expand | 展开/折叠时触发 | 节点信息 |
9198
| check | 勾选时触发（多选） | 被勾选的节点信息 |
@@ -106,7 +113,7 @@ import '@wsfe/vue-tree/dist/style.css'
106113
### VTree Methods
107114

108115
| 方法 | 说明 | 参数 | 返回值 |
109-
|:-----------------------|:------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------|
116+
| :--------------------- | :---------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- |
110117
| setData | 使用此方法重置树数据，可避免大量数据被 vue 监听 | `data: object[]`: 同 data Prop | `void` |
111118
| setChecked | 设置多选选中/取消选中 | `key: string \| number`: 节点 key<br/>`value: boolean`: 是否选中 | `void` |
112119
| setCheckedKeys | 批量设置选中/取消选中 | `keys: Array<string \| number>`: 节点 key<br/>`value: boolean`: 是否选中 | `void` |
@@ -141,31 +148,31 @@ import '@wsfe/vue-tree/dist/style.css'
141148
### VTree Slots
142149

143150
| 名称 | 说明 |
144-
|:--------|:-----------------|
151+
| :------ | :--------------- |
145152
| empty | 暂无数据 |
146153
| loading | 加载中显示的图标 |
147154

148155
### VTree Data Fields
149156

150157
注：以 '`_`' 开头的字段最好不要覆盖，以免影响内部处理逻辑
151158

152-
| 字段 | 说明 |
153-
|:---------------|:--------------------------------------------------------------------------------|
154-
| id | 默认以 'id' 作为 key 字段，也可以通过 `keyField` Prop 指定其他字段作为 key 字段 |
155-
| title | 默认显示的名称，可通过 `titleField` Prop 指定其他字段作为 title 字段 |
156-
| checked | 多选模式下是否勾选 |
157-
| selected | 单选模式下是否选中 |
158-
| indeterminate | 多选模式下是否半选状态 |
159-
| disabled | 是否禁用 |
160-
| expand | 父节点有效，节点展开状态 |
161-
| visible | 是否可见 |
162-
| _filterVisible | 过滤后是否可见，如果为 false 则在其他可见情况下也是不可见的 |
163-
| _parent | 父节点 |
164-
| children | 子节点数组 |
165-
| isLeaf | 标记节点是否为叶子节点 |
166-
| _level | 节点层级，默认从 0 开始 |
167-
| _loading | 节点是否正在加载 |
168-
| _loaded | 节点是否已经加载过，异步加载下有效 |
159+
| 字段 | 说明 |
160+
| :-------------- | :------------------------------------------------------------------------------ |
161+
| id | 默认以 'id' 作为 key 字段，也可以通过 `keyField` Prop 指定其他字段作为 key 字段 |
162+
| title | 默认显示的名称，可通过 `titleField` Prop 指定其他字段作为 title 字段 |
163+
| checked | 多选模式下是否勾选 |
164+
| selected | 单选模式下是否选中 |
165+
| indeterminate | 多选模式下是否半选状态 |
166+
| disabled | 是否禁用 |
167+
| expand | 父节点有效，节点展开状态 |
168+
| visible | 是否可见 |
169+
| \_filterVisible | 过滤后是否可见，如果为 false 则在其他可见情况下也是不可见的 |
170+
| \_parent | 父节点 |
171+
| children | 子节点数组 |
172+
| isLeaf | 标记节点是否为叶子节点 |
173+
| \_level | 节点层级，默认从 0 开始 |
174+
| \_loading | 节点是否正在加载 |
175+
| \_loaded | 节点是否已经加载过，异步加载下有效 |
169176

170177
## VTreeSearch API
171178

@@ -174,7 +181,7 @@ import '@wsfe/vue-tree/dist/style.css'
174181
注：可在 `VTreeSearch` 上直接使用 `VTree` 的所有 Props
175182

176183
| 属性 | 说明 | 类型 | 默认值 |
177-
|:---------------------|:-----------------------------------------------------------------------------------|:---------------------------------------------|:-------------|
184+
| :------------------- | :--------------------------------------------------------------------------------- | :------------------------------------------- | :----------- |
178185
| searchPlaceholder | 搜索输入框的 placeholder | `string` | '搜索关键字' |
179186
| showCheckAll | 是否显示全选复选框 | `boolean` | true |
180187
| showCheckedButton | 是否显示已选按钮 | `boolean` | true |
@@ -191,15 +198,15 @@ import '@wsfe/vue-tree/dist/style.css'
191198
注：可在 `VTreeSearch` 上直接监听 `VTree` 的所有 Events
192199

193200
| 事件名 | 说明 | 返回值 |
194-
|:-------|:-------------------|:-------------|
201+
| :----- | :----------------- | :----------- |
195202
| search | 执行搜索操作时触发 | 搜索的关键字 |
196203

197204
### VTreeSearch Methods
198205

199206
注：可在 `VTreeSearch` 上直接调用 `VTree` 的所有 Methods
200207

201208
| 方法 | 说明 | 参数 | 返回值 |
202-
|:-------------|:---------------|:---------------------------------------------------------|:----------------|
209+
| :----------- | :------------- | :------------------------------------------------------- | :-------------- |
203210
| clearKeyword | 清空关键字 | 无 | `void` |
204211
| getKeyword | 获取搜索关键字 | 无 | `string` |
205212
| search | 执行搜索 | `keyword: string`: 搜索的关键字，默认为内部 this.keyword | `Promise<void>` |
@@ -209,7 +216,7 @@ import '@wsfe/vue-tree/dist/style.css'
209216
注：可在 `VTreeSearch` 上直接传入 `VTree` 的所有 Slots
210217

211218
| 名称 | 说明 |
212-
|:-------------|:---------------------------------------------------|
219+
| :----------- | :------------------------------------------------- |
213220
| search-input | 搜索输入框，可通过此 slot 自行封装树搜索组件的行为 |
214221
| actions | 操作按钮，可在搜索输入框后加入更多操作按钮 |
215222
| footer | 底部信息 |
@@ -221,7 +228,7 @@ import '@wsfe/vue-tree/dist/style.css'
221228
注：可在 `VTreeDrop` 上直接使用 `VTree` 和 `VTreeSearch` 的所有 Props
222229

223230
| 属性 | 说明 | 类型 | 默认值 |
224-
|:---------------------------|:---------------------------------------------------------------------------------|:----------------------------------------------------------------------------------|:---------------|
231+
| :------------------------- | :------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- | :------------- |
225232
| dropHeight | 下拉内容高度 | `number` | 300 |
226233
| dropPlaceholder | 展示输入框 placeholder | `string` | 无 |
227234
| dropDisabled | 是否禁用 | `boolean` | false |
@@ -237,7 +244,7 @@ import '@wsfe/vue-tree/dist/style.css'
237244
注：可在 `VTreeDrop` 上直接监听 `VTree` 和 `VTreeSearch` 的所有 Events
238245

239246
| 事件名 | 说明 | 返回值 |
240-
|:------------------------|:-----------------------|:---------------|
247+
| :---------------------- | :--------------------- | :------------- |
241248
| dropdown-visible-change | 下拉框出现或消失时触发 | 下拉框是否可见 |
242249
| clear | 点击清空按钮时触发 | 无 |
243250

@@ -250,7 +257,7 @@ import '@wsfe/vue-tree/dist/style.css'
250257
注：可在 `VTreeDrop` 上直接传入 `VTree` 和 `VTreeSearch` 的所有 Slots
251258

252259
| 名称 | 说明 |
253-
|:--------|:-----------------------------------------------------|
260+
| :------ | :--------------------------------------------------- |
254261
| 默认 | 展示输入框 |
255262
| display | 展示输入框的展示文字，如果有默认 slot 则此 slot 无效 |
256263
| clear | 替换清空图标，如果有默认 slot 则此 slot 无效 |

0 commit comments

Comments
 (0)