页面使用element-tree
<!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的更多相关文章
- python 解析xml 文件: Element Tree 方式
环境 python:3.4.4 准备xml文件 首先新建一个xml文件,countries.xml.内容是在python官网上看到的. <?xml version="1.0" ...
- vue+element tree(树形控件)组件(2)
今天记录组件的代码和一个调用它的父组件的代码,接口接收数据直接传element直接能用的,也就是经过上一章函数处理过的数据以下是代码 父组件 <template> <commonfi ...
- 新页面,简单的tree视图写法
.xml文件 <?xml version="1.0"?><openerp> <data> <!--Tree view--> < ...
- VUE+element tree 实现权限管理
先写个标题~ ~,后续有空在写 具体功能: 1. 获取所有角色权限列表展示,点击进行编辑,编辑用terr树形结构显示页面结构 2.提交的数据格式(页面名称,角色ID,父节点ID,子节点ID) 3.后面 ...
- vue+element tree(树形控件)组件(1)
最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间用到的知识点. 首先说说需求,就是点击出现弹窗+蒙板,弹窗内容是一 ...
- Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
- tree 向上查找（更新删除后页面的数据）
需求 : 根据选择的id,需要找到一整条tree,id以及id数据的子集都已被删除(向下查找-----上一篇笔记),此时需要更新页面的数据(向上查找) //知道最底层的节点的id,查找满足id的整个t ...
- webpack指南（一）HRM+Tree Shaking
参考:https://www.cnblogs.com/PasserByOne/p/12084323.html https://blog.csdn.net/qq593249106/article/det ...
- 巧用 display: contents 增强页面语义
display: contents 是一个比较陌生的属性,虽然属于 display 这个基本上是最常见的 CSS 属性,但是 contents 这个取值基本不会用到.但是它早在 2016 年就已经得到 ...
- [译]Selenium Python文档：六、页面对象
本章是介绍页面对象设计模式的教程.一个页面对象代表了web应用用户接口的一片区域,你的测试代码将与之交互的. 使用页面对象模式的好处: 可以创建在多个测试样例中都可使用的可重用代码 减少重复性代码 如 ...
随机推荐
- 123457123457---com.threeapp.ShuiShiYanLiWang01----谁是眼力王
com.threeapp.ShuiShiYanLiWang01----谁是眼力王
- 将任意音频格式文件转换成16K采样率16bit的wav文件
此转换需要使用ffmpeg 假设有目录 d:\录音 目录有 张三.m4a, 李四.m4a xxx.m4a(其他任意格式音频触类旁通可以把 *.m4a改成*.*).批量转换成采样率16K,有符号,16b ...
- Linux下-bash: Permission denied 或者 sudo: command not found 错误
有时候执行一个脚本或者运行一个可执行文件时,如执行脚本./foo.sh,会报错-bash: ./foo.sh: Permission denied,你会再试sudo ./foo.sh,发现继续报错su ...
- 【VS开发】【数据库开发】libevent简单入门和介绍
libevent是一个基于事件触发的网络库,memcached底层也是使用libevent库,今天学习下. 总体来说,libevent有下面一些特点和优势: * 统一数据源, 统一I/O事件,信号和定 ...
- mysql配置优化的参数
1．MySQL数据库高效优化解析 Mysql优化是一项非常重要的工作,而且是一项长期的工作,曾经有一个为位DBA前辈说过:mysql的优化,三分配置的优化,七分sql语句的优化. Mysql的优化: ...
- Ext this.getView(...).saveDocumentAs is not a function
一.前言 Ext 导出数据,根据官网的代码,报:this.getView(...).saveDocumentAs is not a function 的问题. 参考:Ext Export not wo ...
- Centos7.x 安装libevent2.x
1.在http://libevent.org/下载libevent-2.1.8-stable.tar.gz 2.tar -zxvf libevent-2.1.8-stable.tar.gz 3.cd ...
- Excel时间序列函数
year 返回对应于某个日期的年份. month 返回对应于某个日期的月份. day 返回对应于某个日期的年份. weekday 返回对应于某个日期的天数. weeknum 返回对应日期在本年中是第几 ...
- Django之ORM表操作
ORM表操作 1.ORM单表操作 首先想操作表的增删改查,需要先导入这个表,以之前创建的UserInfo表为例,在app下的views.py中导入 from app import models def ...
- docker 实践一：简介和安装
docker 的简介 docker 绝对是这几年来的重量级开源软件,它是使用 Go 实现的开源容器项目,分属于虚拟化技术. docker 和 虚拟机 docker 作为一种轻量级的虚拟化方式,在运行应 ...