tarojs 实现 treeSelect 支持全选 部分选中, 收起展开 代码补充完整

Taro.js 是一套用于构建跨平台移动应用的框架，它可以在微信小程序、H5、iOS和Android等多个平台上运行。如果你想在 Taro 中实现 TreeSelect 组件的支持全选、部分选中以及收起/展开的功能，你可以参考下面的代码示例。假设我们已经有了一个基础的 TreeSelect 组件，现在需要添加额外功能：

import { TreeSelect } from 'taro-ui';

// 假设这是你的 TreeSelect 组件的基本结构
const TreeNode = ({ item, selectedKeys, onChange }) => {
  const handleCheckChange = (checked) => {
    if (checked) {
      onChange([...selectedKeys, item.key]);
    } else {
      onChange(selectedKeys.filter(key => key !== item.key));
    }
  };

  return (
    <TreeSelect.Item
      title={item.title}
      key={item.key}
      defaultChecked={selectedKeys.includes(item.key)}
      onCheckChange={handleCheckChange}
    >
      {item.children && item.children.map(childNode => (
        <TreeNode item={childNode} selectedKeys={selectedKeys} onChange={onChange} />
      ))}
    </TreeSelect.Item>
  );
};

// 使用组件时，添加全选/取消全选和收起/展开逻辑
const TreeWithControls = () => {
  const [allSelected, setAllSelected] = useState(false);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const toggleAllSelection = () => {
    // 全选/取消全选操作
    const newSelectedKeys = allSelected ? [] : [...treeData].map(node => node.key);
    setSelectedKeys(newSelectedKeys);
    setAllSelected(!allSelected);
  };

  const toggleItemSelection = (key) => {
    // 如果取消全选状态，仅切换单个节点；如果已经是部分选择，切换到全选状态
    if (!allSelected) {
      setSelectedKeys(selectedKeys.includes(key) ? [] : [...selectedKeys, key]);
      setAllSelected(selectedKeys.length === treeData.length);
    }
  };

  // 根据 allSelected 状态调整节点显示
  const collapsedNodes = allSelected ? [] : treeData.filter(node => !selectedKeys.includes(node.key));

  return (
    <>
      {/* ...其他树选组件内容 */}
      <div>
        <button onClick={toggleAllSelection}>全选/取消全选</button>
        <TreeSelect
          showRadio
          checkedKeys={selectedKeys}
          onChange={setSelectedKeys}
          treeData={collapsedNodes}
          expandedKeys={['']} // 你可以在这里指定初始展开的节点
        >
          {TreeNode}
        </TreeSelect>
      </div>
    </>
  );
};

在这个例子中，`toggleAllSelection` 和 `toggleItemSelection` 函数分别负责全选/取消全选及部分选中操作，`collapsedNodes` 则用于控制节点是否折叠。

请注意，这只是一个基本的实现，实际项目中可能需要考虑更多细节，例如性能优化和用户交互体验。此外，Taro UI 的 API 可能会有所变化，所以请查阅最新的文档以获取最新信息。