<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. windows服务器下配置memcache最大内存值

    windows服务器下修改memcache配置要求如下: 1.用内网ip的方式提供web应用服务器调用,不允许直接通过外网调用,如将memcache服务放在192.168.1.168的服务器上 2.修 ...

  2. Apache Rewrite 规则详解

    在开篇之前: 我想说这篇文章其实是我刚刚接触Rewrite的时候学习的文档,应属转载,但是在这里我不想写明原地址,原因是文章中大多数给出的配置命令经实验都是错误的.需要原文的可以在谷歌上搜索一下&qu ...

  3. sql中的笛卡尔积

    sql中的笛卡尔积 我们对数据库表进行操作时,经常会对多张表进行关联,多表连接查询大家肯定不会陌生,但是一不小心很容易出来庞大冗余的数据. 笛卡尔积数学概念 笛卡尔积是指在数学中,两个集合X和Y的笛卡 ...

  4. C语言基础(14)-递归

    一. 递归的定义 函数可以调用自己,这就叫函数的递归. 先序递归和后序递归 #include <stdio.h> void test(int n); void test1(int n); ...

  5. Linux下查看硬件信息的方法

    用硬件检测程序kuduz探测新硬件:service kudzu start ( or restart) 查看CPU信息:cat /proc/cpuinfo 查看板卡信息:cat /proc/pci 查 ...

  6. 283. Move Zeroes【easy】

    283. Move Zeroes[easy] Given an array nums, write a function to move all 0's to the end of it while ...

  7. 设计模式中类的关系之关联关系(Association)

    关联关系是类与类之间最常用的一种关系,它是一种结构化关系,用于表示一类对象与另一类对象之间有联系.它体现的是两个类.或者类与接口之间语义级别的一种强依赖关系,比如我和我的朋友.这种关系比依赖更强.不存 ...

  8. hdu1695 GCD2 容斥原理 求x属于[1,b]与y属于[1,d],gcd(x,y)=k的对数。(5,7)与(7,5)看作同一对。

    GCD Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accepted Sub ...

  9. java.lang.IllegalArgumentException: column '_id' does not exist问题的解决方案

    我在使用SimpleCursorAdapter的过程中遇到了问题: java.lang.IllegalArgumentException: column '_id' does not exist 这个 ...

  10. Eclipse 创建 Java 接口

    打开新建 Java 接口向导 新建 Java 接口向导可以创建新的 Java 接口.打开向导的方式有: 点击 File 菜单并选择 New > Interface 在 Package Explo ...