<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>树控件测试</title>

    <!-- 引入样式 -->

    <script src="//unpkg.com/vue/dist/vue.js"></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>

</head>

<body>

<div id="app">

    {{ message }}

</div>

<div id="treeView">

    <el-tree

        :data="data2"

        :props="defaultProps"

        show-checkbox

        node-key="id"

        default-expand-all

        :expand-on-click-node="false"

        :render-content="renderContent">

    </el-tree>

</div>

<script type="text/javascript">

    var app = new Vue({

        el: '#app',

        data: {

            message: '树控件测试'

        }

    });

    var treeView = new Vue({

        el: '#treeView',

        data: {

            baseId:1000,

            data2: [{

                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'

                }]

            }],

            defaultProps: {

                children: 'children',

                label: 'label'

            }

        },

        methods:{

            append:function(store, data) {

                store.append({ id: id++, label: 'testtest', children: [] }, data);

            },

            remove:function(store, data) {

                store.remove(data);

            },

            renderContent:function(createElement, { node, data, store }) {

                var self = this;

                return createElement('span', [

                    createElement('span', node.label),

                    createElement('span', {attrs:{

                        style:"float: right; margin-right: 20px"

                    }},[

                        createElement('el-button',{attrs:{

                            size:"mini"

                        },on:{

                            click:function() {

                                console.info("点击了节点" + data.id + "的添加按钮");

                                store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);

                            }

                        }},"添加"),

                        createElement('el-button',{attrs:{

                            size:"mini"

                        },on:{

                            click:function() {

                                console.info("点击了节点" + data.id + "的删除按钮");

                                store.remove(data);

                            }

                        }},"删除"),

                    ]),

                ]);

            }

        }

    })

</script>

</body>

</html>

　　

页面使用element-tree的更多相关文章

  1. python 解析xml 文件: Element Tree 方式

    环境 python:3.4.4 准备xml文件 首先新建一个xml文件,countries.xml.内容是在python官网上看到的. <?xml version="1.0" ...

  2. vue+element tree(树形控件)组件(2)

    今天记录组件的代码和一个调用它的父组件的代码,接口接收数据直接传element直接能用的,也就是经过上一章函数处理过的数据以下是代码 父组件 <template> <commonfi ...

  3. 新页面,简单的tree视图写法

    .xml文件 <?xml version="1.0"?><openerp> <data> <!--Tree view--> < ...

  4. VUE+element tree 实现权限管理

    先写个标题~ ~,后续有空在写 具体功能: 1. 获取所有角色权限列表展示,点击进行编辑,编辑用terr树形结构显示页面结构 2.提交的数据格式(页面名称,角色ID,父节点ID,子节点ID) 3.后面 ...

  5. vue+element tree(树形控件)组件(1)

    最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间用到的知识点. 首先说说需求,就是点击出现弹窗+蒙板,弹窗内容是一 ...

  6. Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode

    Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...

  7. tree 向上查找（更新删除后页面的数据）

    需求 : 根据选择的id,需要找到一整条tree,id以及id数据的子集都已被删除(向下查找-----上一篇笔记),此时需要更新页面的数据(向上查找) //知道最底层的节点的id,查找满足id的整个t ...

  8. webpack指南（一）HRM+Tree Shaking

    参考:https://www.cnblogs.com/PasserByOne/p/12084323.html https://blog.csdn.net/qq593249106/article/det ...

  9. 巧用 display: contents 增强页面语义

    display: contents 是一个比较陌生的属性,虽然属于 display 这个基本上是最常见的 CSS 属性,但是 contents 这个取值基本不会用到.但是它早在 2016 年就已经得到 ...

  10. [译]Selenium Python文档：六、页面对象

    本章是介绍页面对象设计模式的教程.一个页面对象代表了web应用用户接口的一片区域,你的测试代码将与之交互的. 使用页面对象模式的好处: 可以创建在多个测试样例中都可使用的可重用代码 减少重复性代码 如 ...

随机推荐

  1. Django之Form、跨站请求以及cookie、session

    Form表单 常规html页面的form表单验证 常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现. 使用前我们先来熟悉下函数参数:request,其中包含的意义: req ...

  2. hadoop在windows上的配置文件

    core-site.xml <configuration> <property> <name>hadoop.tmp.dir</name> <val ...

  3. 第十九章 动态URL权限控制——《跟我学Shiro》

    目录贴:跟我学Shiro目录贴 用过Spring Security的朋友应该比较熟悉对URL进行全局的权限控制,即访问URL时进行权限匹配:如果没有权限直接跳到相应的错误页面.Shiro也支持类似的机 ...

  4. 利用 AWS 无服务架构之语音合成

    目录 一.架构图 二.服务部署 2.1.创建 DynamoDB 表 2.2.创建 S3 2.2.1 静态网页存储桶 2.2.2.音频存储桶 2.3.创建 SNS Topic 2.4.为 Lambda ...

  5. [转载]oracle xml操作

    /*=====================生成\修改xml========================= */ --xmlelement多个标签层级 SELECT XMLELEMENT(&qu ...

  6. APP 和小程序中通过日期格式获取时间戳的一个bug

    介绍一下背景:业务逻辑就不多说了,就说关键出问题的一步,需要将 2019-10-10 这个格式转换为时间戳.在不同平台不同场景下问题还很怪异 app上:ios 安卓线上的都有问题  ios模拟器没问题 ...

  7. 【牛客网】Longest Common Subsequence

    [牛客网]Longest Common Subsequence 发现只有d数组最格路 于是我们把前三个数组中相同的数记成一个三维坐标,同一个数坐标不会超过8个 从前往后枚举d,每次最多只会更新不超过8 ...

  8. 去掉右键Open Folderas Intellij IDEA Project

    解决: WIN+R键打开运行,输入regedit 打开注册表 在地址栏输入: 计算机\HKEY_CLASSES_ROOT\Directory\Background\shell\Powershell 然 ...

  9. java学习基础知识入门

    基础入门知识(一) 一.java技术的分类 java按照技术标准和应用场景的不同分为三类,分别是JAVASE.JAVAEE.JAVAME JAVASE : 平台标准版,用于开发部署桌面,服务器以及嵌入 ...

  10. 一个好隐蔽的C/C++代码bug

    来自:微博@ruanyf, 一本书上说,下面的 C 语言代码可能会产生无限循环.看了半天,才意识到 Bug 在哪里. 完美解答: 数组下标越界.数组a总共有10个值,a[0]~a[9].for循环里面 ...