1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>树控件测试</title>
  6.     <!-- 引入样式 -->
  7.     <script src="//unpkg.com/vue/dist/vue.js"></script>
  8.     <!-- 引入样式 -->
  9.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  10.     <!-- 引入组件库 -->
  11.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  12. </head>
  13. <body>
  14. <div id="app">
  15.     {{ message }}
  16. </div>
  17.  
  18. <div id="treeView">
  19.     <el-tree
  20.         :data="data2"
  21.         :props="defaultProps"
  22.         show-checkbox
  23.         node-key="id"
  24.         default-expand-all
  25.         :expand-on-click-node="false"
  26.         :render-content="renderContent">
  27.     </el-tree>
  28. </div>
  29.  
  30. <script type="text/javascript">
  31.     var app = new Vue({
  32.         el: '#app',
  33.         data: {
  34.             message: '树控件测试'
  35.         }
  36.     });
  37.  
  38.     var treeView = new Vue({
  39.         el: '#treeView',
  40.         data: {
  41.             baseId:1000,
  42.             data2: [{
  43.                 id: 1,
  44.                 label: '一级 1',
  45.                 children: [{
  46.                     id: 4,
  47.                     label: '二级 1-1',
  48.                     children: [{
  49.                         id: 9,
  50.                         label: '三级 1-1-1'
  51.                     }, {
  52.                         id: 10,
  53.                         label: '三级 1-1-2'
  54.                     }]
  55.                 }]
  56.             }, {
  57.                 id: 2,
  58.                 label: '一级 2',
  59.                 children: [{
  60.                     id: 5,
  61.                     label: '二级 2-1'
  62.                 }, {
  63.                     id: 6,
  64.                     label: '二级 2-2'
  65.                 }]
  66.             }, {
  67.                 id: 3,
  68.                 label: '一级 3',
  69.                 children: [{
  70.                     id: 7,
  71.                     label: '二级 3-1'
  72.                 }, {
  73.                     id: 8,
  74.                     label: '二级 3-2'
  75.                 }]
  76.             }],
  77.             defaultProps: {
  78.                 children: 'children',
  79.                 label: 'label'
  80.             }
  81.         },
  82.         methods:{
  83.             append:function(store, data) {
  84.                 store.append({ id: id++, label: 'testtest', children: [] }, data);
  85.             },
  86.             remove:function(store, data) {
  87.                 store.remove(data);
  88.             },
  89.             renderContent:function(createElement, { node, data, store }) {
  90.                 var self = this;
  91.                 return createElement('span', [
  92.                     createElement('span', node.label),
  93.                     createElement('span', {attrs:{
  94.                         style:"float: right; margin-right: 20px"
  95.                     }},[
  96.                         createElement('el-button',{attrs:{
  97.                             size:"mini"
  98.                         },on:{
  99.                             click:function() {
  100.                                 console.info("点击了节点" + data.id + "的添加按钮");
  101.                                 store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);
  102.                             }
  103.                         }},"添加"),
  104.                         createElement('el-button',{attrs:{
  105.                             size:"mini"
  106.                         },on:{
  107.                             click:function() {
  108.                                 console.info("点击了节点" + data.id + "的删除按钮");
  109.                                 store.remove(data);
  110.                             }
  111.                         }},"删除"),
  112.                     ]),
  113.                 ]);
  114.             }
  115.         }
  116.     })
  117. </script>
  118.  
  119. </body>
  120. </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. VS在项目范围内禁止关闭特定警告

    要在项目范围内禁止警告,请在项目文件中定义要忽略的以分号分隔的警告代码列表.附加警告代码也$(NoWarn); 1.首先找到该项目的 .csproj 文件 >> 在<Property ...

  2. form 提交页面不刷新实现

    // no redirect <!DOCTYPE html> <html> <head> <meta http-equiv="Content-typ ...

  3. 函数 、while、case、select 语句结合

    [root@bogon ~]# cat menue.sh #!/bin/bash yum_list(){ #列出所有yum安装包 yum repolist [ $? -eq ] && ...

  4. 使用python或robotframework调multipart/form-data接口上传文件

    这几天调一个multipart/form-data类型的接口,遇到点小阻碍.之前同事有使用urllib库写了个类似的方法实现,比较长,想要改的时候发现不太好使.在网上查找发现用requests库做这个 ...

  5. Bugly——Xuporter问题处理

    Unity接入Bugly   用其原生的package文件导入,结果在Ios打包时报错,找不到相对应的库. 经过排查: 这个地方如果不加拦截的话,项目中所有的 .projmods文件都会按照xupor ...

  6. 【数据库开发】is not allowed to connect to this MySQL server解决办法

    ERROR 1130: Host '192.168.1.3′ is not allowed to connect to this MySQL server这是告诉你没有权限连接指定IP的主机,下面我们 ...

  7. hdu 1006 Tick and Tick

    Tick and Tick Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  8. MAVEN（二）

    1.本地仓库?Maven到底有哪些仓库?它们什么关系? Maven仓库: 本地仓库路径配置: 包查找路径:本地——>私服——>中央仓库,然后将查找到的jar同步到私服——>本地仓库 ...

  9. [转帖]一文看懂mysql数据库本质及存储引擎innodb+myisam

    一文看懂mysql数据库本质及存储引擎innodb+myisam https://www.toutiao.com/i6740201316745740807/ 原创 波波说运维 2019-09-29 0 ...

  10. MySQL提供的几种检索行数据的优化方式

    ICP(Index Condition Pushdown): 在MySQL5.6之前,存储引擎会通过遍历索引定位基表中 的行,然后返回给Server层,再去为这些数据进行WHERE后的条件过滤.MyS ...