uxcore-cascade-multi-select v0.9.1

uxcore-cascade-multi-select

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

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

props.config

示例

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

config 为一个数组，每一项的配置如下：

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

props.options

示例

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

CascadeMultiModal

API

Props

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>
  }
}