@a2simcode/ui 0.0.262 → 0.0.263
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/tree/index.d.ts +15 -0
- package/dist/components/tree/src/tree.vue.d.ts +15 -0
- package/dist/simcode-ui.es.js +7 -1
- package/dist/simcode-ui.umd.js +1 -1
- package/dist/stats.html +1 -1
- package/docs/components/tree.md +15 -0
- package/docs/examples/tree/check-strictly.vue +53 -0
- package/docs/examples/tree/checkable.vue +1 -1
- package/package.json +1 -1
package/docs/components/tree.md
CHANGED
|
@@ -41,6 +41,19 @@
|
|
|
41
41
|
</template>
|
|
42
42
|
</Demo>
|
|
43
43
|
|
|
44
|
+
## 严格选择
|
|
45
|
+
|
|
46
|
+
使用 `check-strictly` 属性使父子节点的勾选相互独立。
|
|
47
|
+
|
|
48
|
+
<Demo :source-code="treeCheckStrictlyCode">
|
|
49
|
+
<template #source>
|
|
50
|
+
<tree-check-strictly />
|
|
51
|
+
</template>
|
|
52
|
+
<template #description>
|
|
53
|
+
设置 `checkable` 和 `check-strictly` 为 `true`，父子节点的勾选不再联动，勾选父节点不会自动勾选子节点。
|
|
54
|
+
</template>
|
|
55
|
+
</Demo>
|
|
56
|
+
|
|
44
57
|
## 异步加载
|
|
45
58
|
|
|
46
59
|
通过 `load-data` 属性异步加载数据。
|
|
@@ -179,6 +192,7 @@
|
|
|
179
192
|
import TreeBasic from '../examples/tree/basic.vue'
|
|
180
193
|
import TreeFlatData from '../examples/tree/flat-data.vue'
|
|
181
194
|
import TreeCheckable from '../examples/tree/checkable.vue'
|
|
195
|
+
import TreeCheckStrictly from '../examples/tree/check-strictly.vue'
|
|
182
196
|
import TreeLoadData from '../examples/tree/load-data.vue'
|
|
183
197
|
import TreeIcon from '../examples/tree/icon.vue'
|
|
184
198
|
import TreeButtons from '../examples/tree/buttons.vue'
|
|
@@ -194,6 +208,7 @@ import treeApi from './meta/tree'
|
|
|
194
208
|
import treeBasicCode from '../examples/tree/basic.vue?raw'
|
|
195
209
|
import treeFlatDataCode from '../examples/tree/flat-data.vue?raw'
|
|
196
210
|
import treeCheckableCode from '../examples/tree/checkable.vue?raw'
|
|
211
|
+
import treeCheckStrictlyCode from '../examples/tree/check-strictly.vue?raw'
|
|
197
212
|
import treeLoadDataCode from '../examples/tree/load-data.vue?raw'
|
|
198
213
|
import treeIconCode from '../examples/tree/icon.vue?raw'
|
|
199
214
|
import treeButtonsCode from '../examples/tree/buttons.vue?raw'
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div style="height: 400px">
|
|
3
|
+
<j-tree
|
|
4
|
+
:list="treeList"
|
|
5
|
+
checkable
|
|
6
|
+
check-strictly
|
|
7
|
+
:default-checked-keys="['1-1']"
|
|
8
|
+
:check="handleCheck"
|
|
9
|
+
/>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script setup lang="ts">
|
|
14
|
+
import { ref } from 'vue'
|
|
15
|
+
|
|
16
|
+
const treeList = ref([
|
|
17
|
+
{
|
|
18
|
+
label: '一级 1',
|
|
19
|
+
value: '1',
|
|
20
|
+
children: [
|
|
21
|
+
{
|
|
22
|
+
label: '二级 1-1',
|
|
23
|
+
value: '1-1',
|
|
24
|
+
children: [
|
|
25
|
+
{
|
|
26
|
+
label: '三级 1-1-1',
|
|
27
|
+
value: '1-1-1',
|
|
28
|
+
},
|
|
29
|
+
],
|
|
30
|
+
},
|
|
31
|
+
],
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
label: '一级 2',
|
|
35
|
+
value: '2',
|
|
36
|
+
children: [
|
|
37
|
+
{
|
|
38
|
+
label: '二级 2-1',
|
|
39
|
+
value: '2-1',
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: '二级 2-2',
|
|
43
|
+
value: '2-2',
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
},
|
|
47
|
+
])
|
|
48
|
+
|
|
49
|
+
const handleCheck = (checkedKeys: any[], data: any) => {
|
|
50
|
+
console.log('选中的节点：', checkedKeys)
|
|
51
|
+
console.log('选中的节点数据：', data)
|
|
52
|
+
}
|
|
53
|
+
</script>
|