メインコンテンツまでスキップ

Tree ツリー

使用場面​

  • 多量の階層構造を持つデータを表示するシナリオに適しており、コンポーネントの展開・折りたたみや関連選択などの操作により、データの処理を容易に行うことができます。

コンポーネント例​

コンポーネント属性​

属性说明类型默认值
canDrop

ノードがターゲットノードとして使用可能かどうかの判定時にトリガーされるイベント

(info: any) => boolean

-
checkStrictly

チェックボックスを完全に制御

boolean

false

checkStrictly

選択時の戻り値の方式を定義します。all：すべての選択ノードを返す、parent：親ノードがすべて選択されている場合は親ノードのみを返す、child：親ノードがすべて選択されている場合は子ノードのみを返す

'all' | 'parent' | 'child'

'parent'

checkStrictly

チェックボックスを完全に制御

boolean

false

checkable

チェックボックスを表示するかどうか

boolean

false

checkedKeys

デフォルトで選択するノード

string[]

['0-0-0']

checkedKeys

デフォルトでチェックするノード

string[]

["0-0-0"]

dataSource

ノードデータ

TreeDataSource[]

[
{
  key: "0-0",
  label: "0-0",
  children: [
    {
      key: "0-0-0",
      label: "0-0-0",
      children: [
        {
          key: "0-0-0-0",
          label: "0-0-0-0",
          children: [
            {
              key: "0-0-0-0-0",
              label: "0-0-0-0-0",
            },
          ],
        },
        {
          key: "0-0-0-1",
          label: "0-0-0-1",
        },
      ],
    },
    {
      key: "0-0-1",
      label: "0-0-1",
      children: [
        {
          key: "0-0-1-0",
          label: "0-0-1-0",
        },
        {
          key: "0-0-1-1",
          label: "0-0-1-1",
        },
      ],
    },
  ],
},
]
defaultExpandAll

すべてのノードをデフォルトで展開

boolean

true

defaultExpandedKeys

デフォルトで展開するノード

string[]

['0-0-0']

draggable

ドラッグ操作をサポートするかどうか

boolean

false

editable

編集をサポートするかどうか

boolean

false

expandedKeys

展開されたノード

string[]

['0-0-0']

isLoadData

非同期読み込みを有効にするかどうか

boolean

false

loadData

非同期読み込み時にトリガーされるイベント

(data: TreeDataSource) => Promise<TreeDataSource[]>

-
multiple

複数選択をサポートするかどうか

boolean

false

onCheck

チェックボックスをチェックまたはチェック解除したときにトリガーされるイベント

(checkedKeys: string[], extra: any) => void

-
onDragEnd

ドラッグ終了時にトリガーされるイベント

(info: any) => void

-
onDragEnter

ドラッグノードがターゲットに入ったときにトリガーされるイベント

(info: any) => void

-
onDragLeave

ドラッグノードがターゲットノードから離れたときにトリガーされるイベント

(info: any) => void

-
onDragOver

ドラッグノードがターゲットノード上で移動しているときにトリガーされるイベント

(info: any) => void

-
onDragStart

ノードのドラッグ開始時にトリガーされるイベント

(info: any) => void

-
onDrop

ドラッグノードをターゲットノード内または前後にドロップしたときにトリガーされるイベント

(info: any) => void

-
onEditFinish

ノード内容の編集完了時にトリガーされるイベント

(key: string, label: string, node: TreeDataSource) => void

-
onExpand

ノードを展開または折りたたんだときにトリガーされるイベント

(expandedKeys: string[], extra: any) => void

-
onSelect

ノードを選択または選択解除したときにトリガーされるイベント

(selectedKeys: string[], extra: any) => void

-
processDataSource

データ前処理関数

(data: any) => TreeDataSource[]

-
selectable

選択をサポートするかどうか

boolean

true

selectedKeys

デフォルトで選択するノード

string[]

['0-0-0']

showLine

ノードの接続線を表示するかどうか

boolean

true

この文書は機械翻訳により生成されています。翻訳により生じた齟齬や相違点は拘束力を持たず、コンプライアンスや執行目的において法的効力はありません。
© DingTalk (Singapore) Private Limited