fix(tree-select): clean code related to check strategy

2025-03-07 13:48:31 +08:00 · 2021-09-03 01:59:24 +08:00 · 2021-09-03 01:59:24 +08:00 · 140bbace41
commit 140bbace41
parent 6ccbe869c1
8 changed files with 94 additions and 44 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -2,6 +2,10 @@

 ## Pending

+### Breaking Changes
+
+- `n-tree-select`'s `leaf-only` props is deprecated, please use `check-strategy="child"` instead.
+
 ### Fixes

 - Fix `n-cascader` click tag to delete the sub option in multi selection mode, and the tree option is not updated.
@ -17,6 +21,7 @@
 - `n-tree` & `n-tree-select` add `children-field` prop.
 - `n-dropdown` option add `props` prop, closes [#813](https://github.com/TuSimple/naive-ui/issues/813).
 - `n-data-table` supports multi-selection by holding down `shift`, closes [#554](https://github.com/TuSimple/naive-ui/issues/554).
+- `n-tree-select` add `check-strategy` prop, closes [#624](https://github.com/TuSimple/naive-ui/issues/624).

 ### Fixes

@ -112,7 +117,6 @@
 ### Feats

 - `n-loading-bar` add `loading-bar-style` props, closes [#457](https://github.com/TuSimple/naive-ui/issues/457).
- `n-tree-select` add `check-strategy` prop.
 - `n-button` add `text-color` prop.
 - `n-form` export `FormValidationError` type.
 - `n-popconfirm` support not show action components, closes [#770](https://github.com/TuSimple/naive-ui/issues/770).
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -2,6 +2,10 @@

 ## Pending

+### Breaking Changes
+
+- `n-tree-select` 的 `leaf-only` 属性被废弃，请使用 `check-strategy="child"`
+
 ### Fixes

 - 修复 `n-cascader` 多选模式下点击 tag 删除子选项未更新选中项
@ -17,6 +21,7 @@
 - `n-tree` 和 `n-tree-select` 新增 `children-field` 属性
 - `n-dropdown` 选项新增 `props` 属性，关闭 [#813](https://github.com/TuSimple/naive-ui/issues/813)
 - `n-data-table` 支持按住 `shift` 进行多选操作，关闭 [#554](https://github.com/TuSimple/naive-ui/issues/554)
+- `n-tree-select` 增加 `check-strategy` 属性，关闭 [#624](https://github.com/TuSimple/naive-ui/issues/624)

 ### Fixes

@ -112,7 +117,6 @@
 ### Feats

 - `n-loading-bar` 新增 `loading-bar-style` 属性，关闭 [#457](https://github.com/TuSimple/naive-ui/issues/457)
- `n-tree-select` 增加 `check-strategy` 属性.
 - `n-button` 新增 `text-color` 属性
 - `n-form` 导出 `FormValidationError` 类型
 - `n-popconfirm` 支持不显示操作组件，关闭 [#770](https://github.com/TuSimple/naive-ui/issues/770)
--- a/src/tree-select/demos/enUS/check-strategy.demo.md
+++ b/src/tree-select/demos/enUS/check-strategy.demo.md
@ -1,25 +1,35 @@
 # 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
+Set the way to show checked options. `all` means showing all checked nodes. `parent` means showing all checked parent nodes when all child node are checked. `child` means showing all child nodes.

 ```html
-<n-tree-select
+<n-space vertical>
+  <n-space>
+    <n-radio-group v-model:value="checkStrategy">
+      <n-radio-button value="all">All</n-radio-button>
+      <n-radio-button value="parent">Parent</n-radio-button>
+      <n-radio-button value="child">Child</n-radio-button>
+    </n-radio-group>
+  </n-space>
+  <n-tree-select
    multiple
    cascade
    checkable
-  checkStrategy="parent"
+    :check-strategy="checkStrategy"
    :options="options"
    :default-value="['Dig It', 'go']"
-  @update:value="updateValue"
-/>
+    @update:value="handleUpdateValue"
+  />
+</n-space>
 ```

 ```js
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'

 export default defineComponent({
  setup () {
    return {
+      checkStrategy: ref('all'),
      options: [
        {
          label: 'Rubber Soul',
@ -112,7 +122,7 @@ export default defineComponent({
          ]
        }
      ],
-      updateValue: (values) => {
+      handleUpdateValue: (values) => {
        console.log(values)
      }
    }
--- a/src/tree-select/demos/enUS/index.demo-entry.md
+++ b/src/tree-select/demos/enUS/index.demo-entry.md
@ -22,7 +22,7 @@ debug
 | --- | --- | --- | --- |
 | cascade | `boolean` | `false` | Whether to do cascade check when use checkboxes. |
 | checkable | `boolean` | `false` | Whether to use checkbox to select value. |
-| check-strategy | `string` | `'all'` | The way to show checked options. `all`: Show all checked node. `parent`: Show all checked parent node when all child node are checked. `child`: show all child node. |
+| check-strategy | `string` | `'all'` | The way to show checked options. `all` means showing all checked node. `parent` means showing all checked parent node when all child node are checked. `child` means showing all child node. |
 | children-field | `string` | `'children'` | The children field in `TreeSelectOption`. |
 | clearable | `boolean` | `false` | Whether it's clearable. |
 | consistent-menu-width | `boolean` | `true` | Whether to make menu's width consistent with input. Set to `true` will disable virtual scroll. |
--- a/src/tree-select/demos/zhCN/check-strategy.demo.md
+++ b/src/tree-select/demos/zhCN/check-strategy.demo.md
@ -1,23 +1,35 @@
 # 指定勾选策略

+设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时）；`child` 表示只显示子节点。
+
 ```html
-<n-tree-select
+<n-space vertical>
+  <n-space>
+    <n-radio-group v-model:value="checkStrategy">
+      <n-radio-button value="all">All</n-radio-button>
+      <n-radio-button value="parent">Parent</n-radio-button>
+      <n-radio-button value="child">Child</n-radio-button>
+    </n-radio-group>
+  </n-space>
+  <n-tree-select
    multiple
    cascade
    checkable
-  check-strategy="parent"
+    :check-strategy="checkStrategy"
    :options="options"
    :default-value="['Dig It', 'go']"
-  @update:value="updateValue"
-/>
+    @update:value="handleUpdateValue"
+  />
+</n-space>
 ```

 ```js
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'

 export default defineComponent({
  setup () {
    return {
+      checkStrategy: ref('all'),
      options: [
        {
          label: 'Rubber Soul',
@ -110,7 +122,7 @@ export default defineComponent({
          ]
        }
      ],
-      updateValue: (values) => {
+      handleUpdateValue: (values) => {
        console.log(values)
      }
    }
--- a/src/tree-select/demos/zhCN/index.demo-entry.md
+++ b/src/tree-select/demos/zhCN/index.demo-entry.md
@ -22,7 +22,7 @@ debug
 | --- | --- | --- | --- |
 | cascade | `boolean` | `false` | 使用 checkbox 进行多选时是否级联 |
 | checkable | `boolean` | `false` | 是否使用 checkbox 进行选择 |
-| check-strategy | `string` | `'all'` | 设置勾选策略来指定显示的勾选节点，`all`：显示全部选中节点；`parent`：只显示父节点（当父节点下所有子节点都选中时）；`child`：只显示子节点 |
+| check-strategy | `string` | `'all'` | 设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时）；`child` 表示只显示子节点 |
 | children-field | `string` | `'children'` | 替代 `TreeSelectOption` 中的 children 字段名 |
 | clearable | `boolean` | `false` | 是否可清除 |
 | consistent-menu-width | `boolean` | `true` | 是否使菜单宽度和输入框一致，打开会禁用虚拟滚动 |
--- a/src/tree-select/src/TreeSelect.tsx
+++ b/src/tree-select/src/TreeSelect.tsx
@ -10,7 +10,8 @@ import {
  CSSProperties,
  provide,
  watch,
-  nextTick
+  nextTick,
+  watchEffect
 } from 'vue'
 import {
  FollowerPlacement,
@ -38,7 +39,8 @@ import {
  call,
  ExtractPublicPropTypes,
  MaybeArray,
-  useAdjustedTo
+  useAdjustedTo,
+  warnOnce
 } from '../../_utils'
 import { treeSelectLight, TreeSelectTheme } from '../styles'
 import type {
@ -80,8 +82,10 @@ const props = {
    default: undefined
  },
  filterable: Boolean,
-  leafOnly: Boolean,
-  checkStrategy: String as PropType<CheckStrategy>,
+  checkStrategy: {
+    type: String as PropType<CheckStrategy>,
+    default: 'all'
+  },
  maxTagCount: [String, Number] as PropType<number | 'responsive'>,
  multiple: Boolean,
  showPath: Boolean,
@ -121,7 +125,14 @@ const props = {
  'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
  'onUpdate:show': [Function, Array] as PropType<
  MaybeArray<(show: boolean) => void>
-  >
+  >,
+  /**
+   * @deprecated
+   */
+  leafOnly: {
+    type: Boolean,
+    default: undefined
+  }
 } as const

 export type TreeSelectProps = ExtractPublicPropTypes<typeof props>
@ -130,6 +141,16 @@ export default defineComponent({
  name: 'TreeSelect',
  props,
  setup (props) {
+    if (__DEV__) {
+      watchEffect(() => {
+        if (props.leafOnly !== undefined) {
+          warnOnce(
+            'tree-select',
+            '`leaf-only` is deprecated, please use `check-strategy="child"` instead.'
+          )
+        }
+      })
+    }
    const followerInstRef = ref<FollowerInst | null>(null)
    const triggerInstRef = ref<InternalSelectionInst | null>(null)
    const treeInstRef = ref<InternalTreeInst | null>(null)
@ -286,16 +307,14 @@ export default defineComponent({
      if (Array.isArray(mergedValue)) {
        const res: SelectBaseOption[] = []
        const { value: treeMate } = dataTreeMateRef
-        const { checkedKeys } = treeMate.getCheckedKeys(mergedValue)
+        const { checkedKeys } = treeMate.getCheckedKeys(mergedValue, {
+          checkStrategy: props.checkStrategy,
+          cascade: mergedCascadeRef.value
+        })
        const { keyField, labelField } = props
        checkedKeys.forEach((value) => {
          const tmNode = treeMate.getNode(value)
          if (tmNode !== null) {
-            if (
-              props.checkStrategy === 'all' ||
-              (props.checkStrategy === 'parent' && !tmNode.isLeaf) ||
-              (props.checkStrategy === 'child' && tmNode.isLeaf)
-            ) {
            res.push(
              showPath
                ? treeOption2SelectOptionWithPath(
@ -307,7 +326,6 @@ export default defineComponent({
                : treeOption2SelectOption(tmNode, labelField)
            )
          }
-          }
        })
        return res
      }
@ -699,7 +717,6 @@ export default defineComponent({
                            mergedClsPrefix,
                            filteredTreeInfo,
                            checkable,
-                            checkStrategy,
                            multiple
                          } = this
                          return withDirectives(
@ -732,7 +749,7 @@ export default defineComponent({
                                  checkedKeys={this.treeCheckedKeys}
                                  selectedKeys={this.treeSelectedKeys}
                                  checkable={checkable}
-                                  checkStrategy={checkStrategy}
+                                  internalCheckStrategy={this.checkStrategy}
                                  cascade={this.mergedCascade}
                                  leafOnly={this.leafOnly}
                                  multiple={this.multiple}
--- a/src/tree/src/Tree.tsx
+++ b/src/tree/src/Tree.tsx
@ -127,7 +127,6 @@ const treeProps = {
  blockLine: Boolean,
  disabled: Boolean,
  checkedKeys: Array as PropType<Key[]>,
-  checkStrategy: String as PropType<CheckStrategy>,
  defaultCheckedKeys: {
    type: Array as PropType<Key[]>,
    default: () => []
@ -213,6 +212,10 @@ const treeProps = {
    // Make tree-select take over keyboard operations
    type: Boolean,
    default: true
+  },
+  internalCheckStrategy: {
+    type: String as PropType<CheckStrategy>,
+    default: 'all'
  }
 } as const

@ -266,7 +269,7 @@ export default defineComponent({
      })
    })
    const mergedCheckStrategyRef = computed(() =>
-      props.leafOnly ? 'child' : props.checkStrategy
+      props.leafOnly ? 'child' : props.internalCheckStrategy
    )
    const displayedCheckedKeysRef = computed(() => {
      return checkedStatusRef.value.checkedKeys