@antsoo-lib/components 0.1.2 → 0.1.4

package/src/tree-select/index.en-US.md

@@ -0,0 +1,100 @@
+---
+category: Components
+type: Data Entry
+title: TreeSelect
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DfTMRYSDngEAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y5pcQLplFu4AAAAAAAAAAAAADrJ8AQ/original
+---
+
+Tree selection control.
+
+## When To Use
+
+`TreeSelect` is similar to `Select`, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.
+
+## API
+
+### Tree props
+
+| Property                  | Description                                                                                                                                                                                                                                                | Type                                                                              | Default                                                | Version |                          |
+| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------ | ------- | ------------------------ |
+| allowClear                | Whether allow clear                                                                                                                                                                                                                                        | boolean                                                                           | false                                                  |         |                          |
+| defaultValue              | To set the initial selected treeNode(s).                                                                                                                                                                                                                   | string\|string\[]                                                                 | -                                                      |         |                          |
+| disabled                  | Disabled or not                                                                                                                                                                                                                                            | boolean                                                                           | false                                                  |         |                          |
+| popupClassName            | className of dropdown menu                                                                                                                                                                                                                                 | string                                                                            | -                                                      |         | 4.0                      |
+| dropdownMatchSelectWidth  | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll                                                     | boolean \| number                                                                 | true                                                   |         |                          |
+| dropdownStyle             | To set the style of the dropdown menu                                                                                                                                                                                                                      | object                                                                            | -                                                      |         |                          |
+| fieldNames                | Replace the label,value and children fields in treeNode with the corresponding fields in treeData                                                                                                                                                          | object                                                                            | { children:'children', label:'title', value:'value' }  |         | 3.0.0                    |
+| filterTreeNode            | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default.                                                                                                                                            | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function                                               |         |                          |
+| getPopupContainer         | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition.                                                                                      | Function(triggerNode)                                                             | () => document.body                                    |         |                          |
+| labelInValue              | whether to embed label in value, turn the format of value from `string` to `{value: string, label: VNode, halfChecked: string[]}`                                                                                                                          | boolean                                                                           | false                                                  |         |                          |
+| listHeight                | Config popup height                                                                                                                                                                                                                                        | number                                                                            | 256                                                    |         |                          |
+| loadData                  | Load data asynchronously.                                                                                                                                                                                                                                  | function(node)                                                                    | -                                                      |         |                          |
+| maxTagCount               | Max tag count to show                                                                                                                                                                                                                                      | number                                                                            | -                                                      |         |                          |
+| maxTagPlaceholder         | Placeholder for not showing tags                                                                                                                                                                                                                           | slot/function(omittedValues)                                                      | -                                                      |         |                          |
+| multiple                  | Support multiple or not, will be `true` when enable `treeCheckable`.                                                                                                                                                                                       | boolean                                                                           | false                                                  |         |                          |
+| notFoundContent           | Specify content to show when no result matches                                                                                                                                                                                                             | slot                                                                              | `Not Found`                                            |         |                          |
+| placeholder               | Placeholder of the select input                                                                                                                                                                                                                            | string\|slot                                                                      | -                                                      |         |                          |
+| placement                 | The position where the selection box pops up                                                                                                                                                                                                               | `bottomLeft` `bottomRight` `topLeft` `topRight`                                   | bottomLeft                                             | 3.3.0   |
+| replaceFields             | Replace the label,value, key and children fields in treeNode with the corresponding fields in treeData                                                                                                                                                     | object                                                                            | { children:'children', label:'title', value: 'value' } |         | 1.6.1 (3.0.0 deprecated) |
+| searchPlaceholder         | Placeholder of the search input                                                                                                                                                                                                                            | string\|slot                                                                      | -                                                      |         |                          |
+| searchValue(v-model)      | work with `search` event to make search value controlled.                                                                                                                                                                                                  | string                                                                            | -                                                      |         |                          |
+| showCheckedStrategy       | The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode).                  | enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD }       | TreeSelect.SHOW_CHILD                                  |         |                          |
+| showSearch                | Whether to display a search input in the dropdown menu(valid only in the single mode)                                                                                                                                                                      | boolean                                                                           | false                                                  |         |                          |
+| size                      | To set the size of the select input, options: `large` `small`                                                                                                                                                                                              | string                                                                            | 'default'                                              |         |                          |
+| status                    | Set validation status                                                                                                                                                                                                                                      | 'error' \| 'warning'                                                              | -                                                      | 3.3.0   |
+| suffixIcon                | The custom suffix icon                                                                                                                                                                                                                                     | VNode \| slot                                                                     | -                                                      |         |                          |
+| tagRender                 | Customize tag render when `multiple`                                                                                                                                                                                                                       | (props) => slot                                                                   | -                                                      | 3.0     |                          |
+| title                     | custom title                                                                                                                                                                                                                                               | slot                                                                              |                                                        | 3.0.0   |                          |
+| treeCheckable             | Whether to show checkbox on the treeNodes                                                                                                                                                                                                                  | boolean                                                                           | false                                                  |         |                          |
+| treeCheckStrictly         | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true                                                                                                       | boolean                                                                           | false                                                  |         |                          |
+| treeData                  | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value)                                                                                                                     | array\\<{ value, title, children, \[disabled, disableCheckbox, selectable] }>  | \[]                                                    |         |                          |
+| treeDataSimpleMode        | Enable simple mode of treeData. Changes the `treeData` schema to: \[{id:1, pId:0, value:'1', title:"test1",...},...] where pId is parent node's id). It is possible to replace the default `id` and `pId` keys by providing object to `treeDataSimpleMode` | false\|object\\<{ id: string, pId: string, rootPId: null }>                    | false                                                  |         |                          |
+| treeDefaultExpandAll      | Whether to expand all treeNodes by default                                                                                                                                                                                                                 | boolean                                                                           | false                                                  |         |                          |
+| treeDefaultExpandedKeys   | Default expanded treeNodes                                                                                                                                                                                                                                 | string\[] \| number\[]                                                            | -                                                      |         |                          |
+| treeExpandedKeys(v-model) | Set expanded keys                                                                                                                                                                                                                                          | string\[] \| number\[]                                                            | -                                                      |         |                          |
+| treeIcon                  | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true`                                                                                                                                   | boolean                                                                           | false                                                  |         |                          |
+| treeLoadedKeys            | (Controlled) Set loaded tree nodes, work with `loadData` only                                                                                                                                                                                              | string[]                                                                          | []                                                     | 3.3.0   |
+| treeLine                  | Show the line. Ref [Tree - showLine](/components/tree/#components-tree-demo-line)                                                                                                                                                                          | boolean \| object                                                                 | false                                                  | 3.0     |                          |
+| treeNodeFilterProp        | Will be used for filtering if `filterTreeNode` returns true                                                                                                                                                                                                | string                                                                            | 'value'                                                |         |                          |
+| treeNodeLabelProp         | Will render as content of select                                                                                                                                                                                                                           | string                                                                            | 'title'                                                |         |                          |
+| value(v-model)            | To set the current selected treeNode(s).                                                                                                                                                                                                                   | string\|string\[]                                                                 | -                                                      |         |                          |
+| virtual                   | Disable virtual scroll when set to false                                                                                                                                                                                                                   | boolean                                                                           | true                                                   | 3.0     |                          |
+
+### Events
+
+| Events Name           | Description                                                                        | Arguments                     | Version |
+| --------------------- | ---------------------------------------------------------------------------------- | ----------------------------- | ------- |
+| change                | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) |         |
+| dropdownVisibleChange | Called when dropdown open                                                          | function(open)                | 3.0     |
+| search                | A callback function, can be executed when the search input changes.                | function(value: string)       |         |
+| select                | A callback function, can be executed when you select a treeNode.                   | function(value, node, extra)  |         |
+| treeExpand            | A callback function, can be executed when treeNode expanded                        | function(expandedKeys)        |         |
+
+### Tree Methods
+
+| Name    | Description  |
+| ------- | ------------ |
+| blur()  | remove focus |
+| focus() | get focus    |
+
+### TreeNode props
+
+> We recommend you to use `treeData` rather than `TreeNode`, to avoid the trouble of manual construction.
+
+| Property        | Description                                                                      | Type             | Default | Version |
+| --------------- | -------------------------------------------------------------------------------- | ---------------- | ------- | ------- |
+| checkable       | When Tree is checkable, set TreeNode display Checkbox or not                     | boolean          | -       |         |
+| disableCheckbox | Disables the checkbox of the treeNode                                            | boolean          | false   |         |
+| disabled        | Disabled or not                                                                  | boolean          | false   |         |
+| isLeaf          | Leaf node or not                                                                 | boolean          | false   |         |
+| key             | Required property, should be unique in the tree                                  | string \| number | -       |         |
+| selectable      | can be selected                                                                  | boolean          | true    |         |
+| title           | Content showed on the treeNodes                                                  | string           | '---'   |         |
+| value           | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | string           | -       |         |
+
+## FAQ
+
+### How to get parent node in onChange?
+
+We don't provide this since performance consideration.

package/src/tree-select/index.tsx

@@ -0,0 +1,364 @@
+import type { App, ExtractPropTypes } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
+
+import classNames from '../_util/classNames'
+import omit from '../_util/omit'
+import { flattenChildren } from '../_util/props-util'
+import initDefaultProps from '../_util/props-util/initDefaultProps'
+import type { InputStatus } from '../_util/statusUtils'
+import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'
+import type { SelectCommonPlacement } from '../_util/transition'
+import { getTransitionDirection } from '../_util/transition'
+import { booleanType, functionType, objectType, someType, stringType } from '../_util/type'
+import type { CustomSlotsType } from '../_util/type'
+import PropTypes from '../_util/vue-types'
+import type { SizeType } from '../config-provider'
+import { useInjectDisabled } from '../config-provider/DisabledContext'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'
+// CSSINJS
+import useSelectStyle from '../select/style'
+import getIcons from '../select/utils/iconUtil'
+import { useCompactItemContext } from '../space/Compact'
+import type { TreeProps } from '../tree'
+import type { SwitcherIconProps } from '../tree/utils/iconUtil'
+import renderSwitcherIcon from '../tree/utils/iconUtil'
+import type { BaseSelectRef } from '../vc-select'
+import VcTreeSelect, {
+  SHOW_ALL,
+  SHOW_CHILD,
+  SHOW_PARENT,
+  TreeNode,
+  treeSelectProps as vcTreeSelectProps,
+} from '../vc-tree-select'
+import type { BaseOptionType, DefaultOptionType } from '../vc-tree-select/TreeSelect'
+import type { FieldNames, Key } from '../vc-tree-select/interface'
+import devWarning from '../vc-util/devWarning'
+import { warning } from '../vc-util/warning'
+import useStyle from './style'
+
+const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
+  if (transitionName !== undefined) {
+    return transitionName
+  }
+  return `${rootPrefixCls}-${motion}`
+}
+
+type RawValue = string | number
+
+export interface LabeledValue {
+  key?: string
+  value: RawValue
+  label?: any
+}
+
+export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[]
+
+export type RefTreeSelectProps = BaseSelectRef
+
+export function treeSelectProps<
+  ValueType = any,
+  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+>() {
+  return {
+    ...omit(vcTreeSelectProps<ValueType, OptionType>(), [
+      'showTreeIcon',
+      'treeMotion',
+      'inputIcon',
+      'getInputElement',
+      'treeLine',
+      'customSlots',
+    ]),
+    suffixIcon: PropTypes.any,
+    size: stringType<SizeType>(),
+    bordered: booleanType(),
+    treeLine: someType<TreeProps['showLine']>([Boolean, Object]),
+    replaceFields: objectType<FieldNames>(),
+    placement: stringType<SelectCommonPlacement>(),
+    status: stringType<InputStatus>(),
+    popupClassName: String,
+    /** @deprecated Please use `popupClassName` instead */
+    dropdownClassName: String,
+    'onUpdate:value': functionType<(value: any) => void>(),
+    'onUpdate:treeExpandedKeys': functionType<(keys: Key[]) => void>(),
+    'onUpdate:searchValue': functionType<(value: string) => void>(),
+  }
+}
+export type TreeSelectProps = Partial<ExtractPropTypes<ReturnType<typeof treeSelectProps>>>
+
+const TreeSelect = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ATreeSelect',
+  inheritAttrs: false,
+  props: initDefaultProps(treeSelectProps(), {
+    choiceTransitionName: '',
+    listHeight: 256,
+    treeIcon: false,
+    listItemHeight: 26,
+    bordered: true,
+  }),
+  slots: Object as CustomSlotsType<{
+    title?: any
+    titleRender?: any
+    placeholder?: any
+    maxTagPlaceholder?: any
+    treeIcon?: any
+    switcherIcon?: any
+    notFoundContent?: any
+    default?: any
+    leafIcon?: any
+    tagRender?: any
+    suffixIcon?: any
+  }>,
+  setup(props, { attrs, slots, expose, emit }) {
+    warning(
+      !(props.treeData === undefined && slots.default),
+      '`children` of TreeSelect is deprecated. Please use `treeData` instead.',
+    )
+    devWarning(
+      props.multiple !== false || !props.treeCheckable,
+      'TreeSelect',
+      '`multiple` will always be `true` when `treeCheckable` is true',
+    )
+    devWarning(
+      props.replaceFields === undefined,
+      'TreeSelect',
+      '`replaceFields` is deprecated, please use fieldNames instead',
+    )
+    devWarning(
+      !props.dropdownClassName,
+      'TreeSelect',
+      '`dropdownClassName` is deprecated. Please use `popupClassName` instead.',
+    )
+
+    const formItemContext = useInjectFormItemContext()
+    const formItemInputContext = FormItemInputContext.useInject()
+    const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status))
+    const {
+      prefixCls,
+      renderEmpty,
+      direction,
+      virtual,
+      dropdownMatchSelectWidth,
+      size: contextSize,
+      getPopupContainer,
+      getPrefixCls,
+      disabled,
+    } = useConfigInject('select', props)
+    const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction)
+    const mergedSize = computed(() => compactSize.value || contextSize.value)
+    const contextDisabled = useInjectDisabled()
+    const mergedDisabled = computed(() => disabled.value ?? contextDisabled.value)
+    const rootPrefixCls = computed(() => getPrefixCls())
+    // ===================== Placement =====================
+    const placement = computed(() => {
+      if (props.placement !== undefined) {
+        return props.placement
+      }
+      return direction.value === 'rtl'
+        ? ('bottomRight' as SelectCommonPlacement)
+        : ('bottomLeft' as SelectCommonPlacement)
+    })
+    const transitionName = computed(() =>
+      getTransitionName(
+        rootPrefixCls.value,
+        getTransitionDirection(placement.value),
+        props.transitionName,
+      ),
+    )
+    const choiceTransitionName = computed(() =>
+      getTransitionName(rootPrefixCls.value, '', props.choiceTransitionName),
+    )
+    const treePrefixCls = computed(() => getPrefixCls('select-tree', props.prefixCls))
+    const treeSelectPrefixCls = computed(() => getPrefixCls('tree-select', props.prefixCls))
+
+    // style
+    const [wrapSelectSSR, hashId] = useSelectStyle(prefixCls)
+    const [wrapTreeSelectSSR] = useStyle(treeSelectPrefixCls, treePrefixCls)
+
+    const mergedDropdownClassName = computed(() =>
+      classNames(
+        props.popupClassName || props.dropdownClassName,
+        `${treeSelectPrefixCls.value}-dropdown`,
+        {
+          [`${treeSelectPrefixCls.value}-dropdown-rtl`]: direction.value === 'rtl',
+        },
+        hashId.value,
+      ),
+    )
+
+    const isMultiple = computed(() => !!(props.treeCheckable || props.multiple))
+    const mergedShowArrow = computed(() =>
+      props.showArrow !== undefined ? props.showArrow : props.loading || !isMultiple.value,
+    )
+
+    const treeSelectRef = ref()
+    expose({
+      focus() {
+        treeSelectRef.value.focus?.()
+      },
+
+      blur() {
+        treeSelectRef.value.blur?.()
+      },
+    })
+
+    const handleChange: TreeSelectProps['onChange'] = (...args: any[]) => {
+      emit('update:value', args[0])
+      emit('change', ...args)
+      formItemContext.onFieldChange()
+    }
+    const handleTreeExpand: TreeSelectProps['onTreeExpand'] = (keys: Key[]) => {
+      emit('update:treeExpandedKeys', keys)
+      emit('treeExpand', keys)
+    }
+    const handleSearch: TreeSelectProps['onSearch'] = (value: string) => {
+      emit('update:searchValue', value)
+      emit('search', value)
+    }
+    const handleBlur = (e: FocusEvent) => {
+      emit('blur', e)
+      formItemContext.onFieldBlur()
+    }
+    return () => {
+      const {
+        notFoundContent = slots.notFoundContent?.(),
+        prefixCls: customizePrefixCls,
+        bordered,
+        listHeight,
+        listItemHeight,
+        multiple,
+        treeIcon,
+        treeLine,
+        showArrow,
+        switcherIcon = slots.switcherIcon?.(),
+        fieldNames = props.replaceFields,
+        id = formItemContext.id.value,
+        placeholder = slots.placeholder?.(),
+      } = props
+      const { isFormItemInput, hasFeedback, feedbackIcon } = formItemInputContext
+      // ===================== Icons =====================
+      const { suffixIcon, removeIcon, clearIcon } = getIcons(
+        {
+          ...props,
+          multiple: isMultiple.value,
+          showArrow: mergedShowArrow.value,
+          hasFeedback,
+          feedbackIcon,
+          prefixCls: prefixCls.value,
+        },
+        slots,
+      )
+
+      // ===================== Empty =====================
+      let mergedNotFound
+      if (notFoundContent !== undefined) {
+        mergedNotFound = notFoundContent
+      } else {
+        mergedNotFound = renderEmpty('Select')
+      }
+      // ==================== Render =====================
+      const selectProps = omit(props as typeof props & { itemIcon: any; switcherIcon: any }, [
+        'suffixIcon',
+        'itemIcon',
+        'removeIcon',
+        'clearIcon',
+        'switcherIcon',
+        'bordered',
+        'status',
+        'onUpdate:value',
+        'onUpdate:treeExpandedKeys',
+        'onUpdate:searchValue',
+      ])
+
+      const mergedClassName = classNames(
+        !customizePrefixCls && treeSelectPrefixCls.value,
+        {
+          [`${prefixCls.value}-lg`]: mergedSize.value === 'large',
+          [`${prefixCls.value}-sm`]: mergedSize.value === 'small',
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+          [`${prefixCls.value}-borderless`]: !bordered,
+          [`${prefixCls.value}-in-form-item`]: isFormItemInput,
+        },
+        getStatusClassNames(prefixCls.value, mergedStatus.value, hasFeedback),
+        compactItemClassnames.value,
+        attrs.class,
+        hashId.value,
+      )
+      const otherProps: any = {}
+      if (props.treeData === undefined && slots.default) {
+        otherProps.children = flattenChildren(slots.default())
+      }
+      return wrapSelectSSR(
+        wrapTreeSelectSSR(
+          <VcTreeSelect
+            {...attrs}
+            {...selectProps}
+            disabled={mergedDisabled.value}
+            virtual={virtual.value}
+            dropdownMatchSelectWidth={dropdownMatchSelectWidth.value}
+            id={id}
+            fieldNames={fieldNames}
+            ref={treeSelectRef}
+            prefixCls={prefixCls.value}
+            class={mergedClassName}
+            listHeight={listHeight}
+            listItemHeight={listItemHeight}
+            treeLine={!!treeLine}
+            inputIcon={suffixIcon}
+            multiple={multiple}
+            removeIcon={removeIcon}
+            clearIcon={clearIcon}
+            switcherIcon={(nodeProps: SwitcherIconProps) =>
+              renderSwitcherIcon(
+                treePrefixCls.value,
+                switcherIcon,
+                nodeProps,
+                slots.leafIcon,
+                treeLine,
+              )
+            }
+            showTreeIcon={treeIcon as any}
+            notFoundContent={mergedNotFound}
+            getPopupContainer={getPopupContainer?.value}
+            treeMotion={null}
+            dropdownClassName={mergedDropdownClassName.value}
+            choiceTransitionName={choiceTransitionName.value}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onSearch={handleSearch}
+            onTreeExpand={handleTreeExpand}
+            v-slots={{
+              ...slots,
+              treeCheckable: () => <span class={`${prefixCls.value}-tree-checkbox-inner`} />,
+            }}
+            {...otherProps}
+            transitionName={transitionName.value}
+            customSlots={{
+              ...slots,
+              treeCheckable: () => <span class={`${prefixCls.value}-tree-checkbox-inner`} />,
+            }}
+            maxTagPlaceholder={props.maxTagPlaceholder || slots.maxTagPlaceholder}
+            placement={placement.value}
+            showArrow={hasFeedback || showArrow}
+            placeholder={placeholder}
+          />,
+        ),
+      )
+    }
+  },
+})
+
+/* istanbul ignore next */
+export const TreeSelectNode = TreeNode
+export default Object.assign(TreeSelect, {
+  TreeNode,
+  SHOW_ALL: SHOW_ALL as typeof SHOW_ALL,
+  SHOW_PARENT: SHOW_PARENT as typeof SHOW_PARENT,
+  SHOW_CHILD: SHOW_CHILD as typeof SHOW_CHILD,
+  install: (app: App) => {
+    app.component(TreeSelect.name, TreeSelect)
+    app.component(TreeSelectNode.displayName, TreeSelectNode)
+    return app
+  },
+})

package/src/tree-select/index.zh-CN.md

@@ -0,0 +1,95 @@
+---
+category: Components
+type: 数据录入
+title: TreeSelect
+subtitle: 树选择
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DfTMRYSDngEAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y5pcQLplFu4AAAAAAAAAAAAADrJ8AQ/original
+---
+
+树型选择控件。
+
+## 何时使用
+
+类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。
+
+## API
+
+### Tree props
+
+| 参数                      | 说明                                                                                                                                                               | 类型                                                                             | 默认值                                                           | 版本  |                    |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----- | ------------------ |
+| allowClear                | 显示清除按钮                                                                                                                                                       | boolean                                                                          | false                                                            |       |                    |
+| defaultValue              | 指定默认选中的条目                                                                                                                                                 | string/string\[]                                                                 | -                                                                |       |                    |
+| disabled                  | 是否禁用                                                                                                                                                           | boolean                                                                          | false                                                            |       |                    |
+| popupClassName            | 下拉菜单的 className 属性                                                                                                                                          | string                                                                           | -                                                                |       | 4.0                |
+| dropdownMatchSelectWidth  | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动                                                                 | boolean \| number                                                                | true                                                             |       |                    |
+| dropdownStyle             | 下拉菜单的样式                                                                                                                                                     | object                                                                           | -                                                                |       |                    |
+| fieldNames                | 替换 treeNode 中 label,value,children 字段为 treeData 中对应的字段                                                                                                 | object                                                                           | {children:'children', label:'title', value: 'value' }            |       | 3.0.0              |
+| filterTreeNode            | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值                                                                               | boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | Function                                                         |       |                    |
+| getPopupContainer         | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。                                                               | Function(triggerNode)                                                            | () => document.body                                              |       |                    |
+| labelInValue              | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 `{value: string, label: VNode, halfChecked(treeCheckStrictly 时有效): string[] }` 的格式   | boolean                                                                          | false                                                            |       |                    |
+| listHeight                | 设置弹窗滚动高度                                                                                                                                                   | number                                                                           | 256                                                              |       |                    |
+| loadData                  | 异步加载数据                                                                                                                                                       | function(node)                                                                   | -                                                                |       |                    |
+| maxTagCount               | 最多显示多少个 tag                                                                                                                                                 | number                                                                           | -                                                                |       |                    |
+| maxTagPlaceholder         | 隐藏 tag 时显示的内容                                                                                                                                              | slot/function(omittedValues)                                                     | -                                                                |       |                    |
+| multiple                  | 支持多选（当设置 treeCheckable 时自动变为 true）                                                                                                                   | boolean                                                                          | false                                                            |       |                    |
+| notFoundContent           | 当下拉列表为空时显示的内容                                                                                                                                         | slot                                                                             | `Not Found`                                                      |       |                    |
+| placeholder               | 选择框默认文字                                                                                                                                                     | string\|slot                                                                     | -                                                                |       |                    |
+| placement                 | 选择框弹出的位置                                                                                                                                                   | `bottomLeft` `bottomRight` `topLeft` `topRight`                                  | bottomLeft                                                       | 3.3.0 |
+| replaceFields             | 替换 treeNode 中 label,value,key,children 字段为 treeData 中对应的字段                                                                                             | object                                                                           | {children:'children', label:'title', key:'key', value: 'value' } |       | 1.6.1 (3.0.0 废弃) |
+| searchPlaceholder         | 搜索框默认文字                                                                                                                                                     | string\|slot                                                                     | -                                                                |       |                    |
+| searchValue(v-model)      | 搜索框的值，可以通过 `search` 事件获取用户输入                                                                                                                     | string                                                                           | -                                                                |       |                    |
+| showCheckedStrategy       | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD }        | TreeSelect.SHOW_CHILD                                            |       |                    |
+| showSearch                | 在下拉中显示搜索框(仅在单选模式下生效)                                                                                                                             | boolean                                                                          | false                                                            |       |                    |
+| size                      | 选择框大小，可选 `large` `small`                                                                                                                                   | string                                                                           | 'default'                                                        |       |                    |
+| status                    | 设置校验状态                                                                                                                                                       | 'error' \| 'warning'                                                             | -                                                                | 3.3.0 |
+| suffixIcon                | 自定义的选择框后缀图标                                                                                                                                             | VNode \| slot                                                                    | -                                                                |       |                    |
+| tagRender                 | 自定义 tag 内容，多选时生效                                                                                                                                        | slot                                                                             | -                                                                | 3.0   |                    |
+| title                     | 自定义标题                                                                                                                                                         | slot                                                                             |                                                                  | 3.0.0 |                    |
+| treeCheckable             | 显示 checkbox                                                                                                                                                      | boolean                                                                          | false                                                            |       |                    |
+| treeCheckStrictly         | checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true                                                                    | boolean                                                                          | false                                                            |       |                    |
+| treeData                  | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一）                                                                                 | array<{value, label, children, [disabled, disableCheckbox, selectable]}>      | \[]                                                              |       |                    |
+| treeDataSimpleMode        | 使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: \[{id:1, pId:0, value:'1', label:"test1",...},...], `pId` 是父节点的 id)    | false\|Array<{ id: string, pId: string, rootPId: null }>                      | false                                                            |       |                    |
+| treeDefaultExpandAll      | 默认展开所有树节点                                                                                                                                                 | boolean                                                                          | false                                                            |       |                    |
+| treeDefaultExpandedKeys   | 默认展开的树节点                                                                                                                                                   | string\[] \| number\[]                                                           | -                                                                |       |                    |
+| treeExpandedKeys(v-model) | 设置展开的树节点                                                                                                                                                   | string\[] \| number\[]                                                           | -                                                                |       |                    |
+| treeIcon                  | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式                                                                            | boolean                                                                          | false                                                            |       |                    |
+| treeLine                  | 是否展示线条样式，请参考 [Tree - showLine](/components/tree/#components-tree-demo-line)                                                                            | boolean \| object                                                                | false                                                            | 3.0   |                    |
+| treeLoadedKeys            | （受控）已经加载的节点，需要配合 `loadData` 使用                                                                                                                   | string[]                                                                         | []                                                               | 3.3.0 |
+| treeNodeFilterProp        | 输入项过滤对应的 treeNode 属性                                                                                                                                     | string                                                                           | 'value'                                                          |       |                    |
+| treeNodeLabelProp         | 作为显示的 prop 设置                                                                                                                                               | string                                                                           | 'title'                                                          |       |                    |
+| value(v-model)            | 指定当前选中的条目                                                                                                                                                 | string/string\[]                                                                 | -                                                                |       |                    |
+| virtual                   | 设置 false 时关闭虚拟滚动                                                                                                                                          | boolean                                                                          | true                                                             | 3.0   |                    |
+
+### 事件
+
+| 事件名称              | 说明                                   | 回调参数                      | 版本 |
+| --------------------- | -------------------------------------- | ----------------------------- | ---- |
+| change                | 选中树节点或输入值发生变化时调用此函数 | function(value, label, extra) |      |
+| dropdownVisibleChange | 展开下拉菜单的回调                     | function(open)                | 3.0  |
+| search                | 文本框值变化时回调                     | function(value: string)       |      |
+| select                | 树节点被选中时调用                     | function(value, node, extra)  |      |
+| treeExpand            | 展开树节点时调用                       | function(expandedKeys)        |      |
+
+### Tree 方法
+
+| 名称    | 描述     |
+| ------- | -------- |
+| blur()  | 移除焦点 |
+| focus() | 获取焦点 |
+
+### TreeNode props
+
+> 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦
+
+| 参数            | 说明                                               | 类型             | 默认值 | 版本 |
+| --------------- | -------------------------------------------------- | ---------------- | ------ | ---- |
+| checkable       | 当树为 checkable 时，设置独立节点是否展示 Checkbox | boolean          | -      |      |
+| disableCheckbox | 禁掉 checkbox                                      | boolean          | false  |      |
+| disabled        | 是否禁用                                           | boolean          | false  |      |
+| isLeaf          | 是否是叶子节点                                     | boolean          | false  |      |
+| key             | 此项必须设置（其值在整个树范围内唯一）             | string \| number | -      |      |
+| selectable      | 是否可选                                           | boolean          | true   |      |
+| title           | 树节点显示的内容                                   | string\|slot     | '---'  |      |
+| value           | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string           | -      |      |