码迷,mamicode.com
首页 > 其他好文 > 详细

vue-eltree的简单使用

时间:2020-10-22 23:18:56      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:click   des   drop   input   value   tor   index   数组   container   

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

<template>
    <el-container>
        <el-header>Header</el-header>
        <el-container class="container1">
            <el-aside class="aside">
                <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText">
                </el-input>
                <div class="interface">
                    <el-tree class="interfacetree"
                             :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">
                    </el-tree>
                </div>
                <el-tree class="tmethodree"
                         :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">
                </el-tree>
            </el-aside>
            <el-main class="main1">
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
    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;
            }
        }
    };
</script>

获取某个树的某个节点
方法:this.$refs.intertree.store.nodesMap[0]
进行收缩操作
this.$refs.intertree.store.nodesMap[0].expanded = false;
2.

vue-eltree的简单使用

标签:click   des   drop   input   value   tor   index   数组   container   

原文地址:https://blog.51cto.com/10836356/2542966

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!