<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增加同级下级的更多相关文章

  1. cxDBTreelist一些使用方法

    一.导出EXCEL   TXT   HTML: uses cxTLExportLink; cxExportTLToEXCEL(dm.SaveDialog.FileName,cxDBTreeList1, ...

  2. cxdbtreelist的按记录查找节点

    lst_projet.DataController.DataSet.Locate('pm_id',vPm_ID,[]); bl:= lst_projet.DataController.DataSet. ...

  3. 【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

    引言   在现在的前端页面中,尤其是移动端,经常会需要将<header>或者是<footer>模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示. “回 ...

  4. SAX解析DOM4J的方法总结

    <二 .利用SAX进行DOM解析DOM4J的基本练习>    一. 本次总结用到的xml文档    <?xml version="1.0" encoding=&q ...

  5. Document树的解析方法

    一.本次总结用到的xml文本 1.    <?xml version="1.0" encoding="UTF-8" standalone="no ...

  6. emmet插件学习,练习中遇到一些问题

    emmet插件学习:帮助提高敲代码效率的插件 参考文献:Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/1 ...

  7. Java用DOM操作xml

    JAXP DOM方式解析XML文档实例增删改查package jiexi; import javax.xml.parsers.DocumentBuilder; import javax.xml.par ...

  8. JAXP进行DOM和SAX解析

    1.常用XML的解析方式:DOM和SAX 1)DOM思想:将整个XML加载内存中,形成文档对象,所以对XML操作都对内存中文档对象进行. 2)SAX思想:一边解析,一边处理,一边释放内存资源---不允 ...

  9. (转)xml

    1  XML理论回顾 1.1 XML概述 1.XML是可扩展标记语言.是由W3C指定并维护的,目前最新的版本是1.0 2.XML作用: 2.1传输数据,它是一种通用的数据交换格式 2.2配置文件. 1 ...

随机推荐

  1. asp.net core mvc视频A:笔记5-1.路由规则

    方法一:通过MapRoute方法,配置文件位置 小例子:如果所有路径都要在admin下,可以这样写 方法二:通过路由属性 相对路由 现在需要加/admin/home/index才能正常访问原来的默认页 ...

  2. tcp/ip ---以太网和IEEE 802封装

    以太网 它是当今T C P / I P采用的主要的局域网技术.它采用一种称作C S M A / C D的媒体接入方法,其意思是带冲突检测的载波侦听多路接入(Carrier Sense, Multipl ...

  3. PullToRefresh使用详解(一)--构建下拉刷新的listView

    前言:前几天写了篇关于PullToRefresh控件的DEMO导入的博客,但由于当时没有用到,所以就没细往下讲,现在开始到了实战阶段,用到了PullToRefresh的listView样式,网上有讲的 ...

  4. CF 316div2 E.Pig and Palindromes

    E. Pig and Palindromes Peppa the Pig was walking and walked into the forest. What a strange coincide ...

  5. [原创]JAVA号码工具类:实现手机固话号码判断与区号截取

    工具类说明 该工具类主要是用于判断号码的类型,如果是手机类型,则返回号码前7位,便于后面继续判断号码归属地:如果是固话类型,则截取固话的区号,同样也是为了后面判断号码的归属地. 在获取到这些信息之后, ...

  6. Atitit.异常机制的设计原理

    Atitit.异常机制的设计原理 缺陷 关键是只要知晓有一个异常表的存在,try 的范围就是体现在异常表行记录的起点和终点.JVM 在 try 住的代码区间内如有异常抛出的话,就会在当前栈桢的异常表中 ...

  7. Atitit. 数据库-----catalog与schema的设计区别以及在实际中使用 获取数据库所有库表 java jdbc php  c#.Net

    Atitit. 数据库-----catalog与schema的设计区别以及在实际中使用 获取数据库所有库表 java jdbc php  c#.Net 1. -catalog与schema的设计区别1 ...

  8. Visual Studio- “无法启动此程序,因为计算机中丢失 xxx.dll尝试重新安装该程序以解决此问题"

    下午使用VS 2013调试程序时,发现弹出了下列的错误弹框: 网上搜索之后发现是缺失了动态链接库(.dll)文件所致,因此只需要把相应的动态链接库文件放置到指定的目录即可. 另:64位系统用户需要注意 ...

  9. c++ virtual 和 pure virtual的区别

    参考资料: http://stackoverflow.com/questions/1306778/c-virtual-pure-virtual-explained 验证代码: #include < ...

  10. stick footers布局

    需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...