官方文件-TreeSelect樹選擇

• 常見的用法：

• 這裡分享一種場景：在 checkbox 模式下，僅允許選擇子元素（父元素不允許選中）,見下圖。

• 檢視 API 文件 TreeSelect API

【總結】：在使用 TreeSelect 元件時，往往採用構造 treeData 結構的資料來渲染，常用到的屬性值{value, title, children}，這些已經能夠滿足一般場景。對於一些特定場景，可以靈活使用[disabled, disableCheckbox, selectable, checkable]這四個屬性值來實現，如果 treeData 的方式不好實現，也可以手動構造 TreeNode 節點。

• 程式碼

import { TreeSelect } from "antd";
import React, { useState } from "react";

const treeData = [
  {
    title: "Node1",
    value: "0-0",
    key: "0-0",
    //disabled: true,
    //disableCheckbox: true,
    checkable: false,
    selectable: false,
    children: [
      {
        title: "Child Node1",
        value: "0-0-0",
        key: "0-0-0"
      }
    ]
  },
  {
    title: "Node2",
    value: "0-1",
    key: "0-1",
    disabled: true,
    //disableCheckbox: true,
    checkable: false,
    selectable: false,
    children: [
      {
        title: "Child Node3",
        value: "0-1-0",
        key: "0-1-0"
      },
      {
        title: "Child Node4",
        value: "0-1-1",
        key: "0-1-1"
      },
      {
        title: "Child Node5",
        value: "0-1-2",
        key: "0-1-2"
      }
    ]
  }
];

export default function Tree() {
  const [value, setValue] = useState([]);

  const onChange = (value: any) => {
    console.log("onChange ", value);
    setValue(value);
  };

  const tProps = {
    treeData,
    value: value,
    onChange: onChange,
    treeCheckable: true,
    placeholder: "Please select",
    style: {
      width: "300px",
      margin: "100px "
    }
  };
  return <TreeSelect {...tProps} />;
}

 

（1） 設定checkable: false和selectable: false的效果：

（2）設定disabled: true的效果：

（3）設定disableCheckbox: true的效果：

（4）設定checkable: false的效果（這時雖然沒有複選框，但父節點可選）：

（5）設定selectable: false的效果（在treeCheckable: true下該屬性失效）：

（6）在treeCheckable: false下設定selectable: false的效果：