eltree ref什么时候有_vue-eltree的简单使用

1.找到某个节点并进行收缩操作

Header

placeholder="输入关键字进行过滤"

v-model="filterText">

:data="data2"

node-key="id"

:default-expanded-keys="treeExpandData"

:filter-node-method="filterNode"

@node-drag-start="handleDragStart"

@node-drag-enter="handleDragEnter"

@node-drag-leave="handleDragLeave"

@node-drag-over="handleDragOver"

@node-drag-end="handleDragEnd"

@node-drop="handleDrop"

draggable

:allow-drop="allowDrop"

:allow-drag="allowDrag"

ref="intertree">

:data="data1"

node-key="id"

:filter-node-method="filterNode"

default-expand-all

@node-drag-start="handleDragStart"

@node-drag-enter="handleDragEnter"

@node-drag-leave="handleDragLeave"

@node-drag-over="handleDragOver"

@node-drag-end="handleDragEnd"

@node-drop="handleDrop"

@node-click = "closeInterface"

draggable

:allow-drop="allowDrop"

:allow-drag="allowDrag"

ref="tmethodree">

export default {

data() {

return {

tableData: [],

filterText: '',

treeExpandData: [0], //自己定义的用于接收tree树id的数组,

data2: [

{

id: 0,

label: 'case列表',

children: [

{

id: 1,

label: '一级 1',

children: [{

id: 4,

label: '二级 1-1',

children: [{

id: 9,

label: '三级 1-1-1'

}, {

id: 10,

label: '三级 1-1-2'

}]

}]

}, {

id: 2,

label: '一级 2',

children: [{

id: 5,

label: '二级 2-1'

}, {

id: 6,

label: '二级 2-2'

}]

}, {

id: 3,

label: '一级 3',

children: [{

id: 7,

label: '二级 3-1'

}, {

id: 8,

label: '二级 3-2',

children: [{

id: 11,

label: '三级 3-2-1',

children: [{

id: 14,

label: '四级 4-1-1-1'

},{

id: 15,

label: '四级 4-1-1-2'

},{

id: 16,

label: '四级 4-1-1-3'

}]

}, {

id: 12,

label: '三级 3-2-2',

children: [{

id: 17,

label: '四级 4-1-1-1'

},{

id: 18,

label: '四级 4-1-1-2'

},{

id: 19,

label: '四级 4-1-1-3'

}]

}, {

id: 13,

label: '三级 3-2-3',

children: [{

id: 20,

label: '四级 4-1-1-1'

},{

id: 21,

label: '四级 4-1-1-2'

},{

id: 22,

label: '四级 4-1-1-3'

},{

id: 23,

label: '四级 4-1-1-3'

},{

id: 24,

label: '四级 4-1-1-3'

},{

id: 25,

label: '四级 4-1-1-3'

},{

id: 26,

label: '四级 4-1-1-3'

},{

id: 27,

label: '四级 4-1-1-3'

},{

id: 28,

label: '四级 4-1-1-3'

}]

}]

}]

}

]

},

],

data1: [

{

id: 100,

label: 'method列表',

children: [

{

id: 200,

label: '四级 4-1-1-1'

},

{

id: 201,

label: '四级 4-1-1-1'

},

{

id: 202,

label: '四级 4-1-1-1'

},

{

id: 203,

label: '四级 4-1-1-1'

}

]

}

],

defaultProps: {

children: 'children',

label: 'label'

}

};

},

watch: {

filterText(val) {

this.$refs.intertree.filter(val);

},

},

methods: {

closeInterface() {

this.$refs.intertree.store.nodesMap[0].expanded = false;

},

filterNode(value, data) {

if (!value) {

return true;

}

return data.label.indexOf(value) !== -1;

},

handleDragStart(node, ev) {

console.log('drag start', node);

console.log('ev=', ev);

},

handleDragEnter(draggingNode, dropNode, ev) {

console.log('tree drag enter: ', dropNode.label);

console.log('ev=', ev);

},

handleDragLeave(draggingNode, dropNode, ev) {

console.log('tree drag leave: ', dropNode.label);

console.log('ev=', ev);

},

handleDragOver(draggingNode, dropNode, ev) {

console.log('tree drag over: ', dropNode.label);

console.log('ev=', ev);

},

handleDragEnd(draggingNode, dropNode, dropType, ev) {

console.log('tree drag end: ', dropNode && dropNode.label, dropType);

console.log('ev=', ev);

},

handleDrop(draggingNode, dropNode, dropType, ev) {

console.log('tree drop: ', dropNode.label, dropType);

console.log('ev=', ev);

},

allowDrop(draggingNode, dropNode, type) {

if (dropNode.data.label === '二级 3-1') {

return type !== 'inner';

} else {

return true;

}

},

allowDrag(draggingNode) {

return draggingNode.data.label.indexOf('三级 3-2-2') === -1;

}

}

};

获取某个树的某个节点

方法:this.$refs.intertree.store.nodesMap[0]

进行收缩操作

this.$refs.intertree.store.nodesMap[0].expanded = false;

2.