页面使用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应用用户接口的一片区域,你的测试代码将与之交互的. 使用页面对象模式的好处: 可以创建在多个测试样例中都可使用的可重用代码 减少重复性代码 如 ...
随机推荐
- Mybase解决保存文件后再打开不能修改编辑
1.问题复现 2.解决方式 3.可以修改编辑
- 【406】C语言相关函数
<stdlib.h>(1) <stdlib.h>(2) malloc() 用来动态地分配内存空间,分配成功返回指向该内存的地址,失败则返回 NULL. 前面的 (int*) 或 ...
- Kafka管理与监控——broker宕机后无法消费问题
背景 因磁盘满了,导致kafka所有的服务器全部宕机了,然后重启kafka集群,服务是启动成功了,但有一些报错: broker1: broker2: broker3:一直在刷以下错误信息 虽然报了这些 ...
- 微信小程序--TabBar不出现
今天打算开始实战一个微信小程序项目,一开始就踩坑了,正确设置了TabBar,但是TabBar就是不能显示出来,后面才找到原因,这里记录下: app.json正确代码: { "pages&qu ...
- fiddler https 抓包
手机上https抓包: http://blog.csdn.net/wangjun5159/article/details/52202059 需要给fiddler安装插件CertMaker for iO ...
- pcntl_waitpid函数解释
pcntl_waitpid 等待或返回fork的子进程状态.多进程的主进程创建了子进程,那主进程如何确认子进程的状态呢. 假如主进程需要根据子进程的状态做不同的处理呢, 这里的状态包括子进程被kill ...
- 【Leetcode_easy】720. Longest Word in Dictionary
problem 720. Longest Word in Dictionary 题意: solution1: BFS; class Solution { public: string longestW ...
- iOS技术面试08：其他
1 客户端安全性处理方式? 1> 网络数据传输(敏感数据[账号\密码\消费数据\银行卡账号], 不能明文发送) 2> 协议的问题(自定义协议, 游戏代练) 3> 本地文件存储(游戏的 ...
- Git操作记录、腾讯工蜂
腾讯工蜂: http://git.code.tencent.com 登录-->>创建项目-->>获取仓库路径 https://git.code.tencent.com/dang ...
- Blender模型导入进Unity，旋转缩放的调整
Blender跟Unity的XYZ轴不同的原因,导致Blender模型导入Unity之后会发生模型朝向不对. 请先看看下边这个情况: 首先,Blender物体模式下,对模型进行 旋转 缩放,将会在右边 ...