页面使用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应用用户接口的一片区域,你的测试代码将与之交互的. 使用页面对象模式的好处: 可以创建在多个测试样例中都可使用的可重用代码 减少重复性代码 如 ...
随机推荐
- linux 运维指令
[root@yan- ~] # uname -a # 查看内核/操作系统/CPU信息的linux系统信息命令 [root@yan- ~] # head -n /etc/issue # 查看操作系统版本 ...
- mysl创建用户+授权+增、删、改查
1.mysql的root用户无法给普通用户授权问题处理 update mysql.user set Grant_priv='Y' where User='root' and Host='%': flu ...
- 【C/C++开发】运算符重载
c++的一大特性就是重载(overload),通过重载可以把功能相似的几个函数合为一个,使得程序更加简洁.高效.在c++中不止函数可以重载,运算符也可以重载.由于一般数据类型间的运算符没有重载的必要, ...
- laravel的定时任务
首先在laravel项目命令创建: php artisan make:command TestCommand 会在App\Console\Commands文件下看到TestCommand.php文件, ...
- Python中的并行编程速度
这里主要想记录下今天碰到的一个小知识点:Python中的并行编程速率如何? 我想把AutoTool做一个并行化改造,主要目的当然是想提高多任务的执行速度.第一反应就是想到用多线程执行不同模块任务,但是 ...
- 关于db2中listagg函数开发中的体验
一.首先解释一下可能会查询的基础问题: 1.1db2 “with ur”是什么意思: 在DB2中,共有四种隔离级:RS,RR,CS,UR.以下对四种隔离级进行一些描述,同时附上个人做试验的结果.隔离级 ...
- Python习题005
作业一 :任意一个数字列表,然后进行排序(冒泡排序) 方法一: def test1(): list1 = [1,23,4,6,8,55,2,9,90,35] list1.sort() # sort() ...
- WUSTOJ 1287: B304（Java：355ms，C：8ms）
题目:
- PAT(B) 1006 换个格式输出整数（Java）
题目链接:1006 换个格式输出整数 (15 point(s)) 代码 /** * Score 15 * Run Time 153ms * @author wowpH * @version 1.1 * ...
- 基于Task的多线程
/// <summary> /// 基于Task的多线程 /// </summary> public class Tasks { public static void Task ...