Skip to content

alitajs/TreeSelect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TreeSelect

移动端的树选择器,效果图如下:

image

因为数据量不大,最开始做的时候没对数据源做解构,所以从头到尾就是对数组的循环查询,因为支持无限层级,所以时间复杂度,会无限上升。其实在最开始将属性拆成平级,通过 parentId 和 childrenId 去找就会快很多,但我懒得改。感兴趣的朋友可以 PR,或者等我下次改版再说。

使用

pnpm i treeselect4m
import TreeSelect from "treeselect4m";
import React from "react";

export default function ({}) {
  return (
    <TreeSelect
      onChange={(data) => console.log("data", data)}
      value={["显示值1"]}
      treeData={[
        {
          title: "显示值1",
          value: "显示值1",
          children: [
            {
              title: "显示值2",
              value: "显示值2",
              id: "125191",
              children: [
                {
                  title: "显示值3",
                  value: "显示值3",
                  id: "744995",
                },
              ],
            },
          ],
        },
      ]}
      multiple
      treeCheckable
    />
  );
}

属性

interface TreeSelectProps {
  // 引导文字
  placeholder?: string;
  // 标题
  label?: string;
  // 是否可搜索
  showSearch?: boolean;
  // 支持多选(当设置 treeCheckable 时自动变为 true)
  multiple?: boolean;
  // 是否复选
  treeCheckable?: boolean;
  // 选择数据源 datasource
  treeData?: TreeDataItem[];
  // 过滤条件
  treeNodeFilterProp?: string;
  // 展开所有,应该是 pc 端特有的
  treeDefaultExpandAll?: boolean;
  onChange?: (value: string | string[] | undefined) => void;
  // multiple 为 false 时 value 为 string,multiple 为 true 时 value 为 string[]
  value?: string | string[];
}

注意

1、multiple 为 false 时 value 为 string,multiple 为 true 时 value 为 string[] 2、当设置 treeCheckable 时 multiple 自动变为 true 3、当 treeCheckable 为 false 时,父子间选择无关联,各选各的

About

一个移动端的全屏弹窗树选择器

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published