Element-ui树形控件el-tree自定义增加字节点,实时驱动目录树更新

最新推荐文章于 2024-06-04 17:55:20 发布

AF01

最新推荐文章于 2024-06-04 17:55:20 发布

阅读量664

点赞数

分类专栏： vue 文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/songJunFeng1/article/details/120780010

版权

vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单提交</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <el-button @click="handle()">按 钮</el-button>
        <el-tree :data="dataList" :props="defaultProps" @node-click="nodeClick"></el-tree>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                dataList: [{
                    label: '一级 1',
                    children: [{
                        label: '二级 1-1',
                        children: [{
                            label: '三级 1-1-1',
                            children: []
                        }]
                    }]
                }, {
                    label: '一级 2',
                    children: [{
                        label: '二级 2-1',
                        children: [{
                            label: '三级 2-1-1',
                            children: []
                        }]
                    }, {
                        label: '二级 2-2',
                        children: [{
                            label: '三级 2-2-1',
                            children: []
                        }]
                    }]
                }, {
                    label: '一级 3',
                    children: [{
                        label: '二级 3-1',
                        children: [{
                            label: '三级 3-1-1',
                            children: []
                        }]
                    }, {
                        label: '二级 3-2',
                        children: [{
                            label: '三级 3-2-1',
                            children: []
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                arr: ['一级 1', '二级 1-1', '三级 1-1-1'],
                arrIndex: [],
                num: 0,
                node: {},
                obj: {}
            },
            computed: {},
            methods: {
                nodeClick(obj, node, e) {
                    this.obj = obj;
                    this.node = node
                    console.log(obj, node, e);
                },
                handle() {
                    console.log(this.node);
                    this.node.data.children.unshift({
                            label: '新增文件夹',
                            children: []
                        })
                        // this.obj.children.unshift({
                        //     label: '新增文件夹',
                        //     children: []
                        // })
                },
            }
        })
    </script>
</body>

</html>

复制代码即可更新！

AF01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Element-ui树形控件el-tree自定义增加字节点,实时驱动目录树更新

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.
复制链接

扫一扫

专栏目录