antd TreeSelect 組件的高級用法

官方文檔-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的效果：