elementUI增加同级下级
<template>
<div>
<el-row>
<el-col :span="4">
<el-button v-on:click="increase(1)" type="info">增加同级</el-button>
</el-col>
<el-col :span="4">
<el-button v-on:click="increase(2)" type="info">增加下级</el-button>
</el-col>
<el-col :span="4">
<el-button v-on:click="increase(3)" type="warning">修改</el-button>
</el-col>
<el-col :span="4">
<el-button @click="del" type="danger">删除</el-button>
</el-col> </el-row>
<el-row>
<el-col :span="6">
<el-tree :default-expand-all=true :data="data" :props="defaultProps" :highlight-current=true @current-change="handleCurrentClick"></el-tree>
</el-col>
</el-row>
</div>
</template> <script> export default {
data() {
return {
checkedLevel:'',
checkId: 1,
dialogVisible: false,
data: [{
id: 1,
label: '一级 1',
children: [{
id: 301,
label: '二级 1-1',
children: [{
id: 1001,
label: '三级 1-1-1'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 302,
label: '二级 2-1',
children: [{
id: 1002,
label: '三级 2-1-1'
}]
}, {
id: 303,
label: '二级 2-2',
children: [{
id: 1003,
label: '三级 2-2-1'
}]
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 304,
label: '二级 3-1',
children: [{
id: 1004,
label: '三级 3-1-1'
}]
}, {
id: 305,
label: '二级 3-2',
children: [{
id: 1005,
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleCurrentClick(data2, node) {//点击节点,获取当前节点信息
this.checkId = data2.id console.log("this.checkId= ", this.checkId);
},del() {
this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { console.log("删除 ", this.checkId); this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},increase(level) {
this.$prompt('请输入目录标题', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => { if (level === 1) {
console.log("增加同级 ", level+"_"+this.checkId+"_"+value); } else if(level === 2) {
console.log("增加下级 ", level+"_"+this.checkId+"_"+value); } else if(level === 3) {
console.log("修改 ", level+"_"+this.checkId+"_"+value); } this.$message({
type: 'success',
message: '你输入目录标题是: ' + value
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
}
} };
</script>
elementUI增加同级下级的更多相关文章
- cxDBTreelist一些使用方法
一.导出EXCEL TXT HTML: uses cxTLExportLink; cxExportTLToEXCEL(dm.SaveDialog.FileName,cxDBTreeList1, ...
- cxdbtreelist的按记录查找节点
lst_projet.DataController.DataSet.Locate('pm_id',vPm_ID,[]); bl:= lst_projet.DataController.DataSet. ...
- 【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧
引言 在现在的前端页面中,尤其是移动端,经常会需要将<header>或者是<footer>模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示. “回 ...
- SAX解析DOM4J的方法总结
<二 .利用SAX进行DOM解析DOM4J的基本练习> 一. 本次总结用到的xml文档 <?xml version="1.0" encoding=&q ...
- Document树的解析方法
一.本次总结用到的xml文本 1. <?xml version="1.0" encoding="UTF-8" standalone="no ...
- emmet插件学习,练习中遇到一些问题
emmet插件学习:帮助提高敲代码效率的插件 参考文献:Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/1 ...
- Java用DOM操作xml
JAXP DOM方式解析XML文档实例增删改查package jiexi; import javax.xml.parsers.DocumentBuilder; import javax.xml.par ...
- JAXP进行DOM和SAX解析
1.常用XML的解析方式:DOM和SAX 1)DOM思想:将整个XML加载内存中,形成文档对象,所以对XML操作都对内存中文档对象进行. 2)SAX思想:一边解析,一边处理,一边释放内存资源---不允 ...
- (转)xml
1 XML理论回顾 1.1 XML概述 1.XML是可扩展标记语言.是由W3C指定并维护的,目前最新的版本是1.0 2.XML作用: 2.1传输数据,它是一种通用的数据交换格式 2.2配置文件. 1 ...
随机推荐
- MvcPager帮助文档 - MvcAjaxOptions 类
表示用于 MvcPager 在 Ajax 分页模式下的选项设置,该类继承自 AjaxOptions. 公共属性: 名称 说明 默认值 AllowCache 获取或设置一个值,该值指示是否在Ajax分页 ...
- Centos RSA 登录
创建密钥 ssh-keygen -t rsa 1.用户目录下新建.ssh/authorized_keys mkdir .ssh #创建隐藏目录 #修改文件访问权限 chmod 700 .ssh cd ...
- atitit.atiOrmStoreService 框架的原理与设计 part1 概述与新特性
atitit.atiOrmStoreService 框架的原理与设计 part1 概述与新特性 1. 新特性如下 支持生成sql在无数据库连接的情况下 2. Orm设计 主要的俩个以来service ...
- 用JWT技术为SpringBoot的API增加授权保护(转),需要自己实现userdetailservice接口
转自:https://blog.csdn.net/haiyan_qi/article/details/77373900 概述 示例 https://github.com/qihaiyan/jwt-bo ...
- __attribute__系列之aligned
__attribute__的属性aligned,作用是为了设置字节对齐. aligned是对 变量和结构体进行 字节对齐的属性设置. 通过aligned属性设置(aligned(对齐字节数)),可以显 ...
- CentOS 6.2 安装kdbg
地址:http://pkgs.org/centos-5/centos-x86_64/kdbg-2.0.2-1.2.1.x86_64.rpm.html 百度网盘地址:http://pan.baidu.c ...
- spring+redis+nginx 实现分布式session共享
1,spring 必须是4.3以上版本的 2,maven配置 添加两个重要的依赖 <dependency> <groupId>org.springframework.sessi ...
- 挑战:万能的slash! 判断js中“/”是正则、除号、注释?
很久以前在其它地方就探讨和关注过这个问题,但都没有满意的解答. 看了zjfeihu 的帖子: <前端代码加亮插件(html,jss,css),支持即时加亮,运行代码>,再次提出这个比较经典 ...
- [搬家]新域名 akagi201.org
现在感觉自己做了好多年的垃圾信息制造者 以后只在网络上发布有用的东西, 垃圾或者对别人没用的东西就放到自己的硬盘上把 http://akagi201.org
- 【转】 VC++ 关闭程序后任务管理器进程中进程仍然存在的解决方法
转载出处:http://blog.csdn.net/zac_sian/article/details/50809084 可以从以下两个方面进行查找! 1.程序开启了进程,进程中使用了while(1), ...