Skip to content

uxcore/uxcore-cascade-multi-select

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
常鸣
Apr 27, 2020
92759c5 · Apr 27, 2020
May 23, 2019
Feb 9, 2017
Apr 27, 2020
Sep 18, 2018
Jul 3, 2018
Oct 10, 2017
Jun 12, 2018
Jun 12, 2018
Oct 10, 2017
Oct 10, 2017
Feb 9, 2017
May 23, 2019
Mar 18, 2020
Jun 12, 2018
Apr 27, 2020
Sep 18, 2018

Repository files navigation

uxcore-cascade-multi-select

级联多选组件,推荐所有层级的每一个候选 option 的 key 都是不重复的。

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

Development

git clone https://github.com/uxcore/uxcore-cascade-multi-select
cd uxcore-cascade-multi-select
npm install
npm run server

if you'd like to save your install time,you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-cascade-multi-select
cd uxcore-cascade-multi-select
npm install
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.github.io/components/cascade-multi-select

Contribute

Yes please! See the CONTRIBUTING for details.

CascadeMultiSelect

API

Props

选项 描述 类型 必填 默认值
prefixCls 默认的类名前缀 String false "kuma-cascade-multi"
className 自定义类名 String false ""
dropdownClassName dropdown 部分的定制类名 String false ""
config 每一级的特殊配置项,可参考下方案例 Array false []
options 横向级联的数据,可参考下方案例 Array true []
value 可由外部控制的值,可参考下方案例 Array false []
defaultValue 初始默认的值,格式同 value Array false []
cascadeSize 级联层级数 number false 3
placeholder placeholder string false 'Please Select' 或 '请选择'
notFoundContent 没有子项级联数据时显示内容 String false 'No Data' 或 '没有数据'
allowClear 是否允许清空 bool false true
disabled 禁用模式,只能看到被禁掉的输入框 bool false false
readOnly 只读模式,只能看到纯文本 bool false false
locale 'zh-cn' or 'en-us' String false 'zh-cn'
onSelect 选中选项的回调函数 function false (valueList, labelList, leafList, cascadeSelected) => {}
onItemClick 点击选项事件,返回选项信息 function false (item) => {}
onOk 点击确认按钮回调函数 function false (valueList, labelList, leafList, cascadeSelected) => {}
onCancel 取消选择时回调函数,通常不点确定,直接隐藏下拉框也会触发这个函数 function false () => {}
beforeRender 处理在input中预显示的内容,具体用法参考下方的案例 function false (value, options) => {}
keyCouldDuplicated 是否允许除了第一级和最后一级以外的 id 重复 bool false false
isCleanDisabledLabel 已禁用选项是否可被清除 bool false false
labelWithPath 是否启用已选Label按层级方式显示 bool false false

props.config

** 示例 **

const config = [{
  checkable: false,
  showSearch: true, // 显示过滤项,默认为 false
}, {
  checkable: false, // 设置第二级不可选
}, {
  checkable: false,
}]

config 为一个数组,每一项的配置如下:

  • checkable: (boolean) 该级是否可选,默认为 true
  • showSearch: (boolean) 该级是否展示过滤搜索框,默认为 false

props.options

选项 描述 类型 必填 默认值
value 选项的值 String true ""
label 选项的名称 String true ""
children 选项的子项集 Array false []
disabled 是否禁止选中 boolean false undefined

** 示例 **

const options = [{
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
      disabled: true,
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

props.value

props.value 传递的是 key 构成的数组,这里的 key 可以是任意级别,除非当 prop keyCouldDuplicated 为 true 时,必须传 叶子节点的 key 数组

const value = ['xihu', 'bingjiang'];

** 示例 **

<CascadeMultiSelect
  options={options}
  value={['xihu', 'nanjing']}
/>

props.beforeRender

props.beforeRender = (value, options) => { return '渲染你自己想要的字符串'; }

beforeRender 返回一个字符串,用来渲染进展开面板触发器的 input 内容。beforeRender 有两个参数,第一个 value 就是当前所有选中的 value 值数组,比较重要的是 options,options 对应的就是 props.options,并且带有每一个选项的选中状态。比如,对于 [{ label: 'label1', children: [{ label: 'label1-1' }] }],当用户选中了 label1 时,options 的结构为:

[{ label: 'label1', checked: true, children: [{ label: 'label1-1', checked: true }] }]

你在业务中通过获取 checked 的值,就可以知道用户选中了哪些选项,此外,当用户未全选某一级时,还会有 halfChecked 属性。

props.onSelect

(valueList, labelList, leafList, cascadeList) => {
  valueList: 选中选项的value列表
  labelList: 选中选项的label列表
  leafList: 选中所有子项的{value, label}列表
  cascadeList: 所有级联结构,如果 item 被选中,则会有一个属性 `checked: true`
}

注:如果选项的子集全部选中,则返回该选项值

CascadeMultiPanel

API

Props

选项 描述 类型 必填 默认值
className 自定义类名 String false ""
prefixCls 默认的类名前缀 String false "kuma-cascade-multi"
config 配置项 Array false []
options 横向级联的数据 Array true []
value 可由外部控制的值 Array false []
cascadeSize 级联层级数 number false 3
notFoundContent 没有子项级联数据时显示内容 String false 'No Data' 或 '没有数据'
allowClear 是否允许清空 bool false true
locale 'zh-cn' or 'en-us' String false 'zh-cn'
onSelect 选中选项的回调函数 function false (valueList, labelList, leafList) => {}
onItemClick 点击选项事件,返回选项信息 function false (item) => {}
keyCouldDuplicated 是否允许除了第一级和最后一级以外的 id 重复 bool false false

CascadeMultiModal

API

Props

选项 描述 类型 必填 默认值
prefixCls 默认的类名前缀 String false "kuma-cascade-multi"
className 自定义类名 String false ""
config 配置项 Array false []
options 横向级联的数据 Array true []
value 可由外部控制的值 Array false []
cascadeSize 级联层级数 number false 3
notFoundContent 没有子项级联数据时显示内容 String false 'No Data' 或 '没有数据'
allowClear 是否允许清空 bool false true
locale 'zh-cn' or 'en-us' String false 'zh-cn'
onSelect 选中选项的回调函数 function false (valueList, labelList, leafList) => {}
onItemClick 点击选项事件,返回选项信息 function false (item, level) => {}
title 标题 String false '级联选择'
width dialog 宽度 Number false 672
onOk 成功按钮回调函数 Function false (valueList, labelList, leafList) => {}
onCancel 取消的回调函数 Function false () => {}

props 复用 uxcore-cascade-multi-select 的 props.

继承了部分Dialog的props,

onOk

(valueList, labelList, leafList, cascadeList) => {
  valueList: 选中选项的value列表
  labelList: 选中选项的label列表
  leafList: 选中所有子项的{value, label}列表
  cascadeList: 所有级联结构,如果 item 被选中,则会有一个属性 `checked: true`
}

使用方法

import CascadeMultiSelect from 'uxcore-cascade-multi-select';

const {
  CascadeMultiPanel,
  CascadeMultiModal,
} = CascadeMultiSelect;

render() {
  return () {
    <div>
      <CascadeMultiPanel />
      <CascadeMultiSelect />
      <CascadeMultiModal />
    </div>
  }
}

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published