<!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. 【419】C语言语句

    判断语句 C 语言提供了以下类型的判断语句.点击链接查看每个语句的细节. 语句 描述 if 语句 一个 if 语句 由一个布尔表达式后跟一个或多个语句组成. if...else 语句 一个 if 语句 ...

  2. 【Leetcode_easy】606. Construct String from Binary Tree

    problem 606. Construct String from Binary Tree 参考 1. Leetcode_easy_606. Construct String from Binary ...

  3. charles 白名单

    本文参考:charles 白名单 charles 白名单 白名单工具,允许您阻止除选定位置之外的所有请求. 注意:如果一个请求与"黑名单"和"白名单"同时匹配成 ...

  4. python 全栈开发之旅

    目录 python 基础语法 python 数据类型(未完成) python 内置函数(未完成) python 常用标准库(未完成) python 类(未完成) python 进程.线程.协程(未完成 ...

  5. .Net中委托的协变和逆变详解

    关于协变和逆变要从面向对象继承说起.继承关系是指子类和父类之间的关系:子类从父类继承所以子类的实例也就是父类的实例.比如说Animal是父类,Dog是从Animal继承的子类:如果一个对象的类型是Do ...

  6. 工作总结--CTO（张王岩）File的使用

    名称     路径分隔符 pathSeparator   separator 构造器 文件名.路径名 getName()  getPath() getAbsolutePath()  getParent ...

  7. (JavaScript) 百度地图与腾讯地图坐标转换

    /** * 坐标转换,百度地图坐标转换成腾讯地图坐标 * lng 腾讯经度(pointy) * lat 腾讯纬度(pointx) * 经度>纬度 */ function bMapToQQMap( ...

  8. REDIS scan与sunionstore合并多集合数据

    实际业务场景: 现需求要将多个KEY的set集合数据合并到一个总集合中,思路:通过scan分批扫描满足条件的KEY,然后用sunionstore分批合并. 注意闭坑:此种解决方案只适用于待合并的集合K ...

  9. “无法改变的设计”——浅谈Java中的final关键字

    在Java中,final关键字可以用来修饰类.变量(包括成员变量和局部变量).方法,下面从这三个方面分别说明. final方法 当一个方法被final修饰时,表明这个方法不能被子类重写. 下面程序试图 ...

  10. 【坑】使用IDEA创建maven的时候，提示缺少plugin-clean 等

    解决方法 检查你的网络,能否访问 maven 中央仓库 : 在 IDEA 中是否对 maven 进行了配置 IDEA 默认使用的 仓库 和 配置文件,都是 .m2 下面的: 如果你自己对 maven ...