transfer-tree-antd
v0.1.17
Published
简单的tree形式的穿梭框
Downloads
5
Readme
基于antd的tree组件实现treeTransfer组件
tree形式的穿梭框支持左右tree形式的数据展示
API
| api | 类型 | 是否必选 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | dataSource | array | true | [] | 完整的数据源遵循Tree的数据结构 | | title | array | true | - | 穿梭框的标题(数组第一项为左侧,第二项为右侧)| | defaultValues | array | false | [] | 默认的初始值只在组件第一次渲染时生效 | | values | array | false | [] | 受控选择的values | | disabled | boolean | false | false | 是否禁用 | | leftDisabled | boolean | false | false | 左侧Tree是否禁用 | | rightDisabled | boolean | false | false | 右侧Tree是否禁用 | | showSearch | boolean | false | true | 是否有搜索框 | | searchItems | array | false | ['label', 'key'] | 搜索时匹配的属性(数据源的属性要与此同步)| | searchPlaceholder | array | false | ['请输入', '请输入'] | 搜索框的placeHolder | | notFoundContent | string | false | 暂无数据 | 无数据时的显示文本 | | onMove | function | false | - | 数据移动时触发的函数, 默认参数一为选择的keys,参数二为数组形式的JSON字符串数据为为选择之后左侧的数据源和右侧的数据源 |
示例
简单使用
npm install transfer-tree-antd --save
import React, { Component } from 'react';
import TreeTransfer from 'transfer-tree-antd';
const mockData = [
{
"title": '1',
"key": "1",
"children": [
{
"title": "1-0",
"key": "1-0",
"children": [
{
"title": "1-0-0",
"key": "1-0-0"
},
{
"title": "1-0-1",
"key": "1-0-1"
},
],
},
{
"title": "1-1",
"key": "1-1",
"children": [
{
"title": "1-1-0",
"key": "1-1-0"
},
{
"title": "1-1-1",
"key": "1-1-1"
},
],
}
],
},
{
"title": '2',
"key": "2",
"children": [
{
"title": "2-0",
"key": "2-0",
"children": [
{
"title": "2-0-0",
"key": "2-0-0"
},
{
"title": "2-0-1",
"key": "2-0-1"
}
],
},
{
"title": "2-1",
"key": "2-1",
"children": [
{
"title": "2-1-0",
"key": "2-1-0"
},
{
"title": "2-1-1",
"key": "2-1-1"
}
],
},
],
}
];
class App extends Component {
onMove = (keys, info) => {
console.log(keys);
console.log(JSON.parse(info));
}
render() {
return (
<TreeTransfer
dataSource={mockData}
title={['左侧标题', '右侧标题']}
onMove={this.onMove}
/>
)
}
}
render(<App />, document.querySelector('#app'));