-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(tree-select): add check strategy in tree-select #758
Changes from 12 commits
d7606d3
feb138d
b9aa421
b2844be
ac544a9
1837816
8028f06
7743c1d
5d275d8
2c350e3
77b67b1
094e67c
39d8e7f
b2deea8
2644384
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
# Set Check Strategy | ||
|
||
# all: show all checked node; parent: show all checked parent node when all child node are checked; child: show all child node | ||
|
||
```html | ||
<n-tree-select | ||
multiple | ||
cascade | ||
checkable | ||
checkStrategy="parent" | ||
:options="options" | ||
:default-value="['Dig It', 'go']" | ||
@update:value="updateValue" | ||
/> | ||
``` | ||
|
||
```js | ||
import { defineComponent } from 'vue' | ||
|
||
export default defineComponent({ | ||
setup () { | ||
return { | ||
options: [ | ||
{ | ||
label: 'Rubber Soul', | ||
key: 'Rubber Soul', | ||
children: [ | ||
{ | ||
label: | ||
"Everybody's Got Something to Hide Except Me and My Monkey", | ||
key: "Everybody's Got Something to Hide Except Me and My Monkey" | ||
}, | ||
{ | ||
label: 'Drive My Car', | ||
key: 'Drive My Car', | ||
disabled: true | ||
}, | ||
{ | ||
label: 'Norwegian Wood', | ||
key: 'Norwegian Wood' | ||
}, | ||
{ | ||
label: "You Won't See", | ||
key: "You Won't See", | ||
disabled: true | ||
}, | ||
{ | ||
label: 'Nowhere Man', | ||
key: 'Nowhere Man' | ||
}, | ||
{ | ||
label: 'Think For Yourself', | ||
key: 'Think For Yourself' | ||
}, | ||
{ | ||
label: 'The Word', | ||
key: 'The Word' | ||
}, | ||
{ | ||
label: 'Michelle', | ||
key: 'Michelle', | ||
disabled: true | ||
}, | ||
{ | ||
label: 'What goes on', | ||
key: 'What goes on' | ||
}, | ||
{ | ||
label: 'Girl', | ||
key: 'Girl' | ||
}, | ||
{ | ||
label: "I'm looking through you", | ||
key: "I'm looking through you" | ||
}, | ||
{ | ||
label: 'In My Life', | ||
key: 'In My Life' | ||
}, | ||
{ | ||
label: 'Wait', | ||
key: 'Wait' | ||
} | ||
] | ||
}, | ||
{ | ||
label: 'Let It Be', | ||
key: 'Let It Be Album', | ||
children: [ | ||
{ | ||
label: 'Two Of Us', | ||
key: 'Two Of Us' | ||
}, | ||
{ | ||
label: 'Dig A Pony', | ||
key: 'Dig A Pony' | ||
}, | ||
{ | ||
label: 'Across The Universe', | ||
key: 'Across The Universe', | ||
children: [ | ||
{ | ||
label: 'Dig It', | ||
key: 'Dig It' | ||
}, | ||
{ | ||
label: 'go', | ||
key: 'go' | ||
} | ||
] | ||
} | ||
] | ||
} | ||
], | ||
updateValue: (values) => { | ||
console.log(values) | ||
} | ||
} | ||
} | ||
}) | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
# 指定勾选策略 | ||
|
||
```html | ||
<n-tree-select | ||
multiple | ||
cascade | ||
checkable | ||
checkStrategy="parent" | ||
07akioni marked this conversation as resolved.
Show resolved
Hide resolved
|
||
:options="options" | ||
:default-value="['Dig It', 'go']" | ||
@update:value="updateValue" | ||
/> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 把三种策略都写进 demo |
||
``` | ||
|
||
```js | ||
import { defineComponent } from 'vue' | ||
|
||
export default defineComponent({ | ||
setup () { | ||
return { | ||
options: [ | ||
{ | ||
label: 'Rubber Soul', | ||
key: 'Rubber Soul', | ||
children: [ | ||
{ | ||
label: | ||
"Everybody's Got Something to Hide Except Me and My Monkey", | ||
key: "Everybody's Got Something to Hide Except Me and My Monkey" | ||
}, | ||
{ | ||
label: 'Drive My Car', | ||
key: 'Drive My Car', | ||
disabled: true | ||
}, | ||
{ | ||
label: 'Norwegian Wood', | ||
key: 'Norwegian Wood' | ||
}, | ||
{ | ||
label: "You Won't See", | ||
key: "You Won't See", | ||
disabled: true | ||
}, | ||
{ | ||
label: 'Nowhere Man', | ||
key: 'Nowhere Man' | ||
}, | ||
{ | ||
label: 'Think For Yourself', | ||
key: 'Think For Yourself' | ||
}, | ||
{ | ||
label: 'The Word', | ||
key: 'The Word' | ||
}, | ||
{ | ||
label: 'Michelle', | ||
key: 'Michelle', | ||
disabled: true | ||
}, | ||
{ | ||
label: 'What goes on', | ||
key: 'What goes on' | ||
}, | ||
{ | ||
label: 'Girl', | ||
key: 'Girl' | ||
}, | ||
{ | ||
label: "I'm looking through you", | ||
key: "I'm looking through you" | ||
}, | ||
{ | ||
label: 'In My Life', | ||
key: 'In My Life' | ||
}, | ||
{ | ||
label: 'Wait', | ||
key: 'Wait' | ||
} | ||
] | ||
}, | ||
{ | ||
label: 'Let It Be', | ||
key: 'Let It Be Album', | ||
children: [ | ||
{ | ||
label: 'Two Of Us', | ||
key: 'Two Of Us' | ||
}, | ||
{ | ||
label: 'Dig A Pony', | ||
key: 'Dig A Pony' | ||
}, | ||
{ | ||
label: 'Across The Universe', | ||
key: 'Across The Universe', | ||
children: [ | ||
{ | ||
label: 'Dig It', | ||
key: 'Dig It' | ||
}, | ||
{ | ||
label: 'go', | ||
key: 'go' | ||
} | ||
] | ||
} | ||
] | ||
} | ||
], | ||
updateValue: (values) => { | ||
console.log(values) | ||
} | ||
} | ||
} | ||
}) | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -47,7 +47,7 @@ import type { | |
TreeSelectOption, | ||
Value | ||
} from './interface' | ||
import { treeSelectInjectionKey } from './interface' | ||
import { treeSelectInjectionKey, CheckStrategy } from './interface' | ||
import { | ||
treeOption2SelectOption, | ||
filterTree, | ||
|
@@ -81,6 +81,7 @@ const props = { | |
}, | ||
filterable: Boolean, | ||
leafOnly: Boolean, | ||
checkStrategy: String as PropType<CheckStrategy>, | ||
maxTagCount: [String, Number] as PropType<number | 'responsive'>, | ||
multiple: Boolean, | ||
showPath: Boolean, | ||
|
@@ -265,10 +266,16 @@ export default defineComponent({ | |
if (Array.isArray(mergedValue)) { | ||
const res: SelectBaseOption[] = [] | ||
const { value: treeMate } = dataTreeMateRef | ||
mergedValue.forEach((value) => { | ||
const { checkedKeys } = treeMate.getCheckedKeys(mergedValue) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 不是下面那样处理,那样干的话 treemate 白改了😂。是通过 getCheckedKeys 的第二个 options。 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 拿到 checkedKeys |
||
checkedKeys.forEach((value) => { | ||
const tmNode = treeMate.getNode(value) | ||
if (tmNode !== null) { | ||
res.push( | ||
if ( | ||
props.checkStrategy === 'all' || | ||
(props.checkStrategy === 'parent' && !tmNode.isLeaf) || | ||
(props.checkStrategy === 'child' && tmNode.isLeaf) | ||
) { | ||
res.push( | ||
showPath | ||
? treeOption2SelectOptionWithPath( | ||
tmNode, | ||
|
@@ -277,6 +284,7 @@ export default defineComponent({ | |
) | ||
: treeOption2SelectOption(tmNode) | ||
) | ||
} | ||
} | ||
}) | ||
return res | ||
|
@@ -669,6 +677,7 @@ export default defineComponent({ | |
mergedClsPrefix, | ||
filteredTreeInfo, | ||
checkable, | ||
checkStrategy, | ||
multiple | ||
} = this | ||
return withDirectives( | ||
|
@@ -700,6 +709,7 @@ export default defineComponent({ | |
checkedKeys={this.treeCheckedKeys} | ||
selectedKeys={this.treeSelectedKeys} | ||
checkable={checkable} | ||
checkStrategy={checkStrategy} | ||
cascade={this.mergedCascade} | ||
leafOnly={this.leafOnly} | ||
multiple={this.multiple} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
把三种的用途写一下