示例
类型
默认
PCPhonePad
<page>
<module title="默认">
<tree data="{{treeData}}" defaultExpandedList="{{defaultExpandedList}}" showCheckbox="{{false}}" />
</module>
</page>
export default XPage({
data:{
defaultExpandedList: ['1'],
treeData: [{
label: 'text',
id: "1",
children: [{
label: 'text',
id: '1-1',
children: [{
label: 'text',
id: '1-1-1'
},{
label: 'text',
id: '1-1-2'
}]
},{
label: 'text',
id: '1-2',
children: [{
label: 'text',
id: '1-2-1'
},{
label: 'text',
id: '1-2-2'
}]
},{
label: 'text',
id: '1-3',
children: [{
label: 'text',
id: '1-3-1'
},{
label: 'text',
id: '1-3-2'
}]
},{
label: 'text',
id: '1-4',
},{
label: 'text',
id: '1-5',
},{
label: 'text',
id: '1-6',
},{
label: 'text',
id: '1-7',
}]
}],
}
})
多选
PCPhonePad
<page>
<module title="多选">
<tree data="{{treeData}}" defaultExpandedList="{{defaultExpandedList}}" />
</module>
</page>
export default XPage({
data:{
defaultExpandedList: ['1'],
treeData: [{
label: 'text',
id: "1",
children: [{
label: 'text',
id: '1-1',
children: [{
label: 'text',
id: '1-1-1'
},{
label: 'text',
id: '1-1-2'
}]
},{
label: 'text',
id: '1-2',
children: [{
label: 'text',
id: '1-2-1'
},{
label: 'text',
id: '1-2-2'
}]
},{
label: 'text',
id: '1-3',
children: [{
label: 'text',
id: '1-3-1'
},{
label: 'text',
id: '1-3-2'
}]
},{
label: 'text',
id: '1-4',
},{
label: 'text',
id: '1-5',
},{
label: 'text',
id: '1-6',
},{
label: 'text',
id: '1-7',
}]
}],
}
})
带搜索
PCPhonePad
<page>
<module title="带搜索">
<tree data="{{treeData}}" defaultExpandedList="{{defaultExpandedList}}" filterable />
</module>
</page>
export default XPage({
data:{
defaultExpandedList: ['1'],
treeData: [{
label: 'text',
id: "1",
children: [{
label: 'text',
id: '1-1',
children: [{
label: 'text',
id: '1-1-1'
},{
label: 'text',
id: '1-1-2'
}]
},{
label: 'text',
id: '1-2',
children: [{
label: 'text',
id: '1-2-1'
},{
label: 'text',
id: '1-2-2'
}]
},{
label: 'text',
id: '1-3',
children: [{
label: 'text',
id: '1-3-1'
},{
label: 'text',
id: '1-3-2'
}]
},{
label: 'text',
id: '1-4',
},{
label: 'text',
id: '1-5',
},{
label: 'text',
id: '1-6',
},{
label: 'text',
id: '1-7',
}]
}],
}
})
节点拖拽
PCPhonePad
<page>
<module title="节点拖拽">
<tree
draggable
data="{{treeData}}"
defaultProps="{{defaultProps}}"
defaultExpandedList="{{defaultExpandedList}}"
showCheckbox="{{false}}"
allowDrop="{{allowDrop}}"
allowDrag="{{allowDrag}}"
bindNodeDragStart="handleDragStart"
bindNodeDragEnter="handleDragEnter"
bindNodeDragLeave="handleDragLeave"
bindNodeDragOver="handleDragOver"
bindNodeDragEnd="handleDragEnd"
bindNodeDrop="handleDrop"
/>
</module>
</page>
export default XPage({
data:{
defaultExpandedList: [1],
defaultProps: {
label: 'name',
children: 'children'
},
treeData: [{
"children": [{
"id": "1#6",
"name": "1011-物美古城店(周炯专用)",
"venderId": 1,
"children": [{
"id": "1#6#1",
"name": "1011-1-物美古城店(周炯专用)1",
"venderId": 1,
"disabled": true
}, {
"id": "1#6#2",
"name": "1011-2-物美古城店(周炯专用)2",
"venderId": 1
}],
},
{
"id": "1#7",
"name": "1012-物美西门店（蘑菇小炮）",
"venderId": 1,
},
{
"id": "1#8",
"name": "1013-西黄村店",
"venderId": 1
},
{
"id": "1#9",
"name": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "1#10",
"name": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "1#11",
"name": "1016-多点第一天团团",
"venderId": 1
}
],
"id": 1,
"name": "1-测试来客oop门店组"
},
{
"children": [{
"id": "2#6",
"name": "1011-物美古城店(周炯专用)",
"venderId": 1
},
{
"id": "2#7",
"name": "1012-物美西门店（蘑菇小炮）",
"venderId": 1,
"disabled": true,
},
{
"id": "2#8",
"name": "1013-西黄村店",
"venderId": 1
},
{
"id": "2#9",
"name": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "2#10",
"name": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "2#11",
"name": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "2#12",
"name": "1019-科大店（成都测试）",
"venderId": 1
},
{
"id": "2#13",
"name": "1020-小云岗",
"venderId": 1
},
],
"id": 2,
"name": "2-测试来客oop门店组（复制）",
"disabled": true,
}, {
"children": [{
"id": "3#6",
"name": "1011-物美古城店(周炯专用)",
"venderId": 1
},
{
"id": "3#7",
"name": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "3#8",
"name": "1013-西黄村店",
"venderId": 1
},
{
"id": "3#9",
"name": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "3#10",
"name": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "3#11",
"name": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "3#12",
"name": "1019-科大店（成都测试）",
"venderId": 1
}
],
"id": 3,
"name": "3-测试来客oop门店组（复制）（复制）"
}, {
"children": [{
"id": "4#112",
"name": "1171-中关村门店(DmallOS专用)",
"venderId": 1
},
{
"id": "4#308",
"name": "1477-联想桥店（银座）",
"venderId": 1
}
],
"id": 4,
"name": "4-来客促销门店组-A"
}, {
"children": [{
"id": "5#6",
"name": "1011-物美古城店(周炯专用)",
"venderId": 1
},
{
"id": "5#7",
"name": "1012-物美西门店（蘑菇小炮）",
"venderId": 1
},
{
"id": "5#8",
"name": "1013-西黄村店",
"venderId": 1
},
{
"id": "5#9",
"name": "1014-北京物美os拼团（小本本）",
"venderId": 1
},
{
"id": "5#10",
"name": "1015-社区拼团自动化测试专用（勿动！）",
"venderId": 1
},
{
"id": "5#11",
"name": "1016-多点第一天团团",
"venderId": 1
},
{
"id": "5#308",
"name": "1477-联想桥店（银座）",
"venderId": 1
}
],
"id": 5,
"name": "5-来客促销门店组-B"
},
{
"children": [],
"id": 11,
"name": "11-结算成本管理门店组"
}
],
},
handleDragStart(node, ev) {
console.info('drag start', node);
},
handleDragEnter(draggingNode, dropNode, ev) {
console.info('tree drag enter: ', dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
console.info('tree drag leave: ', dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
console.info('tree drag over: ', dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.info('tree drag end: ', dropNode && dropNode.label, dropType);
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.info('tree drop: ', dropNode.label, dropType);
},
allowDrop(draggingNode, dropNode, type) {
if(dropNode.data.name === '1012-物美西门店（蘑菇小炮）'){
return type !== 'inner'
}else{
return true
}
},
allowDrag(draggingNode) {
return draggingNode.data.name !== '1012-物美西门店（蘑菇小炮）';
}
})
自定义节点内容
PCPhonePad
<page>
<module title="自定义节点内容" subtitle="可自定义节点的展示元素">
<tree
data="{{treeData}}"
defaultExpandedList="{{defaultExpandedList}}"
renderContent="{{renderContent}}"
filterable
/>
</module>
</page>
import Tag from 'cabinx/components/tag/0.6.0/index';
export default XPage({
data:{
defaultExpandedList: ['1'],
treeData: [{
label: 'text',
id: "1",
children: [{
label: 'text',
id: '1-1',
children: [{
label: 'text',
id: '1-1-1'
},{
label: 'text',
id: '1-1-2'
}]
},{
label: 'text',
id: '1-2',
children: [{
label: 'text',
id: '1-2-1'
},{
label: 'text',
id: '1-2-2'
}]
},{
label: 'text',
id: '1-3',
children: [{
label: 'text',
id: '1-3-1'
},{
label: 'text',
id: '1-3-2'
}]
},{
label: 'text',
id: '1-4',
},{
label: 'text',
id: '1-5',
},{
label: 'text',
id: '1-6',
},{
label: 'text',
id: '1-7',
}]
}],
},
renderContent(h, { node, data, store }) {
const enumStatus = {
'1-4': 'blue',
'1-5': 'purple',
'1-6': 'green',
'1-7': 'red'
}
const isNotTag = !enumStatus[node.key];
if(isNotTag){
return (<span class="custom-tree-node"><span>{node.label}</span></span>)
}
return (<Tag status={enumStatus[node.key]} text={node.label} />);
},
})
.custom-tree-node{
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
.cust-btn{
margin-right: 10px;
}
}
交互
默认选中
PCPhonePad
<page>
<module title="默认选中">
<tree
data="{{treeData}}"
defaultExpandedList="{{defaultExpandedList}}"
defaultCheckedList="{{defaultCheckedList}}"
/>
</module>
</page>
import Tag from 'cabinx/components/tag/0.6.0/index';
export default XPage({
data:{
defaultExpandedList: ['1'],
defaultCheckedList: ['1-3', '1-5'],
treeData: [{
label: 'text',
id: "1",
children: [{
label: 'text',
id: '1-1',
children: [{
label: 'text',
id: '1-1-1'
},{
label: 'text',
id: '1-1-2'
}]
},{
label: 'text',
id: '1-2',
children: [{
label: 'text',
id: '1-2-1'
},{
label: 'text',
id: '1-2-2'
}]
},{
label: 'text',
id: '1-3',
children: [{
label: 'text',
id: '1-3-1'
},{
label: 'text',
id: '1-3-2'
}]
},{
label: 'text',
id: '1-4',
},{
label: 'text',
id: '1-5',
},{
label: 'text',
id: '1-6',
},{
label: 'text',
id: '1-7',
}]
}],
},
})
节点内容&复选框被点击是的回调
PCPhonePad
<page>
<module title="节点内容&复选框被点击是的回调">
<tree
data="{{treeData}}"
defaultExpandedList="{{defaultExpandedList}}"
defaultCheckedList="{{defaultCheckedList}}"
bindNodeClick="handleNodeClick"
bindCheck="handleCheck"
bindNodeExpand="handleNodeExpand"
/>
</module>
</page>
import Tag from 'cabinx/components/tag/0.6.0/index';
export default XPage({
data:{
defaultExpandedList: ['1'],
defaultCheckedList: ['1-3', '1-5'],
treeData: [{
label: 'text',
id: "1",
children: [{
label: 'text',
id: '1-1',
children: [{
label: 'text',
id: '1-1-1'
},{
label: 'text',
id: '1-1-2'
}]
},{
label: 'text',
id: '1-2',
children: [{
label: 'text',
id: '1-2-1'
},{
label: 'text',
id: '1-2-2'
}]
},{
label: 'text',
id: '1-3',
children: [{
label: 'text',
id: '1-3-1'
},{
label: 'text',
id: '1-3-2'
}]
},{
label: 'text',
id: '1-4',
},{
label: 'text',
id: '1-5',
},{
label: 'text',
id: '1-6',
},{
label: 'text',
id: '1-7',
}]
}],
},
/**
*
* @param {*} nodeData 传递给 data 属性的数组中该节点所对应的对象
* @param {*} curSelectedStatus 树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
*/
handleCheck(nodeData, curSelectedStatus){
console.info('handleCheck: ', nodeData, curSelectedStatus)
},
// 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
handleNodeClick(nodeData, node, instance){
console.info('handleNodeClick: ', nodeData, node, instance)
},
// 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
handleNodeExpand(nodeData, node, instance){
console.info('handleNodeExpand: ', nodeData, node, instance)
},
})
子节点懒加载
PCPhonePad
<page>
<module title="子节点懒加载">
<tree
lazy="{{true}}"
load="{{treeLoad}}"
/>
</module>
</page>
import Tag from 'cabinx/components/tag/0.6.0/index';
export default XPage({
data:{},
// 该方法有2个参数： node 节点，resolve 方法，需要把要展示的节点传递到resolve里面
treeLoad(node, resolve){
console.info('treeLoad: ', node, resolve)
if (node.level === 0) {
return resolve([{ label: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
label: 'leaf',
isLeaf: true
}, {
label: 'zone'
}];
resolve(data);
}, 500);
},
})
父节点和子节点没有强关联
PCPhonePad
<page>
<module title="父节点和子节点没有强关联">
<tree
data="{{treeData}}"
defaultExpandedList="{{defaultExpandedList}}"
leafOnly="{{false}}"
checkStrictly="{{true}}"
/>
</module>
</page>
export default XPage({
data:{
defaultExpandedList: ['1'],
treeData: [{
label: 'text',
id: "1",
children: [{
label: 'text',
id: '1-1',
children: [{
label: 'text',
id: '1-1-1'
},{
label: 'text',
id: '1-1-2'
}]
},{
label: 'text',
id: '1-2',
children: [{
label: 'text',
id: '1-2-1'
},{
label: 'text',
id: '1-2-2'
}]
},{
label: 'text',
id: '1-3',
children: [{
label: 'text',
id: '1-3-1'
},{
label: 'text',
id: '1-3-2'
}]
},{
label: 'text',
id: '1-4',
},{
label: 'text',
id: '1-5',
},{
label: 'text',
id: '1-6',
},{
label: 'text',
id: '1-7',
}]
}],
}
})
当子节点全部选中时，父节点也是选中，仅返回父级value
PCPhonePad
<page>
<module title="当子节点全部选中时，父节点也是选中，仅返回父级value">
<tree
data="{{treeData}}"
defaultExpandedList="{{defaultExpandedList}}"
leafOnly="{{false}}"
checkAllJustParentValue="{{true}}"
/>
</module>
</page>
export default XPage({
data:{
defaultExpandedList: ['1'],
treeData: [{
label: 'text',
id: "1",
children: [{
label: 'text',
id: '1-1',
children: [{
label: 'text',
id: '1-1-1'
},{
label: 'text',
id: '1-1-2'
}]
},{
label: 'text',
id: '1-2',
children: [{
label: 'text',
id: '1-2-1'
},{
label: 'text',
id: '1-2-2'
}]
},{
label: 'text',
id: '1-3',
children: [{
label: 'text',
id: '1-3-1'
},{
label: 'text',
id: '1-3-2'
}]
},{
label: 'text',
id: '1-4',
},{
label: 'text',
id: '1-5',
},{
label: 'text',
id: '1-6',
},{
label: 'text',
id: '1-7',
}]
}],
}
})
Attributes
| 属性 | 说明 | 类型 | 可选值 | 默认值 | 端 | 版本 |
|---|---|---|---|---|---|---|
| data | 全部数据 | Array | -- | -- | PC/Mobile | -- |
| disabled | 是否禁用 | Boolean | -- | false | PC/Mobile | -- |
| filterable | 是否可搜索 | Boolean/Object | -- | false | PC/Mobile | -- |
| defaultCheckedList | 默认选中的类目 | Array | -- | -- | PC/Mobile | -- |
| defaultExpandedList | 默认展开的类目 | Array | -- | -- | PC/Mobile | -- |
| nodeKey | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | String | -- | 'id' | PC/Mobile | -- |
| defaultProps | 指定节点的映射关系 | Object{ children,label,disabled } | -- | { children: 'children', label: 'label', disabled: 'disabled' } | PC/Mobile | -- |
| leafOnly | true 仅返回叶子节点 false 包含父級节点 | Boolean | -- | true | PC/Mobile | -- |
| checkStrictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法 | Boolean | -- | false | PC/Mobile | -- |
| showCheckbox | 节点是否可被选择 | Boolean | -- | true | PC/Mobile | -- |
| expandOnClickNode | 点击节点手展开/收缩 | Boolean | -- | true | PC/Mobile | -- |
| highlightCurrent | 是否高亮当前选中节点 | Boolean | -- | false | PC/Mobile | -- |
| defaultExpandAll | 是否默认展开所有节点 | Boolean | -- | false | PC/Mobile | -- |
| renderContent | 树节点的内容区的渲染 | Function | -- | -- | PC/Mobile | -- |
| lazy | 是否懒加载子节点，需与 load 方法结合使用 | Boolean | -- | false | PC/Mobile | -- |
| load | 加载子树数据的方法，仅当 lazy 属性为true 时生效 | Function(node, resolve) | -- | -- | PC/Mobile | -- |
| checkAllJustParentValue | 当子节点全部选中时，父节点也是选中，仅返回父级value | Boolean | -- | false | PC/Mobile | -- |
Events
| 名称 | 说明 | 回调参数 | 端 | 版本 |
|---|---|---|---|---|
| node-click | 节点被点击时 | (nodeData, node, instance)=>void | PC/Mobile | -- |
| node-expand | 节点被展开时 | (nodeData, node, instance)=>void | PC/Mobile | -- |
| check | 复选框被点击时 | (nodeData, {checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys})=>void | PC/Mobile | -- |
Methods
| 名称 | 说明 | 入参 | 返回 | 端 | 版本 |
|---|---|---|---|---|---|
| getData | 根据 leafOnly 获取选中项，返回数组 | (isNodeInfo:Boolean)带有true参数的时候会返回每个节点所有信息 | nodeKeys/nodeList | PC/Mobile | -- |
| setFilterText | 外部默认设置搜索项 | (text:String)要设置的字符串 | -- | PC | -- |
| getCheckedKeys | 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false | nodeKeys/nodeList | PC | -- |
| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false | -- | PC | -- |
| getCurrentKey | 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null | -- | nodeKey | PC | -- |
| setCurrentKey | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (nodeKey) 待被选节点的 key，若为 null 则取消当前高亮的节点 | -- | PC | -- |
| getCurrentNode | 获取当前被选中节点的 data，若没有节点被选中则返回 null | -- | node | PC | -- |
| setCurrentNode | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node | -- | PC | -- |