<!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. LeetCode_136. Single Number

    136. Single Number Easy Given a non-empty array of integers, every element appears twice except for ...

  2. C/C++语言，自学资源，滚动更新中……

    以下教学视频中,缺少对“字符串”技术的讨论,大家注意看书. 一维数组,及其举例:(第四版)P77~P85,书上这部分内容写的很好,很详细,尤其是这里列出来的每一个例子都要仔细去看一看,对你会很有帮助. ...

  3. darknet标签转化为COCO标签

    import sys import json import cv2 import os import shutil dataset = { "info": { "desc ...

  4. 【VS开发】网络SOCKET编程INADDR_ANY选项

    INADDR_ANY选项 网络编程中常用到bind函数,需要绑定IP地址,这时可以设置INADDR_ANY INADDR_ANY就是指定地址为0.0.0.0的地址,这个地址事实上表示不确定地址,或&q ...

  5. jqGrid获取展示的所有行id集合

    $("#jqGrid").getDataIDs();

  6. Linux集群环境准备及20项基础优化

    中小规模集群架构: 1.什么是集群? 简单地说,集群就是一堆机器 做同一件事, 例如:京东(www.jd.com)提供卖东西服务这就是一件事,可能是几千台服务器,在背后运转支撑这个网站. www.ba ...

  7. 1、5 写注册的后台并写前台html&密码加密&id 随机

    1 public void save(Student student) { // TODO Auto-generated method stub student.setSid(UUID.randomU ...

  8. ROS学习（一）Ros 中使用kinect

    上的安装说明如下: 官网上明确写了如果安装windows kinect还需要安装一个驱动,但是有些ROS的书上并没有这么做,只提到了使用如下两步进行安装即可使用: sudo apt-get insta ...

  9. [转帖]HTTP请求方法：GET、HEAD、POST、PUT、DELETE、CONNECT、OPTIONS、TRACE 说明

    HTTP请求方法:GET.HEAD.POST.PUT.DELETE.CONNECT.OPTIONS.TRACE 说明 平时的Rest开发,用到的都是GET,POST,PUT,DELETE类型的请求. ...

  10. Docker部署Gitlab11.10.4

    1.下载镜像 官方镜像地址:https://hub.docker.com/r/gitlab/gitlab-ce ,根据自己需要下载指定版本 [root@vanje-dev01 ~]# docker p ...