npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@m-materials/com-tree

v1.0.2

Published

基于antd TreeSelect 下拉树结构选择器

Downloads

41

Readme

下拉树

@m-materials/com-tree

基于antd TreeSelect 下拉树结构选择器 主要增加了远程加载数据功能

API

| 参数 | 说明 | 类型 | 默认值 | 是否必填 | | | ----------------- | ---------------------------------------------------- | -------------------------------- | ----------------- | ---- | --- | | allowClear | 可以点击清除图标删除内容 | boolean | false | | | | afterSelect | 选择数据行后触发该事件 | Function(item: T, index: number) | - | | | | afterClear | 清空数据触发该事件 | Function | - | | | | afterLoaded | 数据请求完成调用该事件,返回接口请求的数据 | Function(data: object[]) | - | | | | cascadeParams | 级联参数配置 | object | - | | | | className | 选择框样式名 | string | - | | | | defaultValue | 输入框默认内容 | string | - | | | | disabled | 组件失效状态 | boolean | false | | | | dataSource | 静态数据源 | object[] | [] | | | | field | 额外提交的表单字段属性名,表单受控 | string[] | [] | | | | form | antd 表单的 form 属性,参考 antd 的[Form]组件 | WrappedFormUtils| - | | | | name | 填充输入框显示的表单字段属性名,表单受控 | string | | | | | placeholder | 选择框默认文字 | string | - | | | | reader | 接口数据解析适配,参考配置项 | object | - | | | | rowKey | 设置列表项唯一的 key,可以是返回字符串的字符串或函数 | Function((item: T) => string) | string | 'id' | | | style | css 属性配置 | React.CSSProperties | - | | | | showSearch | 显示快速搜索 | boolean | true | | | | searchPlaceHolder | 搜索框默认文字 | string | - | | | | searchProperties | 搜索接口数据属性配置 | string[] | ['code', 'name'] | | | | store | 数据接口对象,参考配置项 | object | - | | | | value | 输入框内容 | string | - | | | | width | 数据面板宽度,默认与选择框同宽 | number | - | | |

StoreProps

  • dataSource 用来配置本地数据,store用来配置远程数据请求信息。
  • dataPath 用于后端渲染下拉树的数据节点,默认读取response(后端响应数据中的'data'属性)。你也可配置成'data.content', 表示读取返回数据中data中的content作为下拉树渲染内容。

| 参数 | 说明 | 类型 | 默认值 | 版本 | | -------- | -------------------- | --------------- | ------ | ---- | | params | 接口请求参数 | object | - | | | type | 接口请求类型 | 'GET' | 'POST' | GET | | | url | 接口请求地址 | string | - | | | autoLoad | 初始化时自动获取数据 | boolean | false | | | dataPath | 用于渲染数据路径 | string | 'data' | |

Reader

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ----------- | -------------------------------------------- | --------- | ---------- | ---- | | childKey | 子节点的属性名 | string | 'children'| | | field | 与dataSource树状节点属性对应,form表单提交时候将获取额外属性 | string[] | - | | | name | 对应节点key | string | - | |