<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. unity, 弹出panel一定要放在UI Hierarchy的底端

    如上图,buyPanel放在最底端,为的是它弹出时屏蔽所有其它UI的消息.

  2. UML序列图

    先准备好之前的类图,然后在最开始的地方新添加一个版块“交互设计” Add Diagram --> Sequence Diagram Add --> Actor建立一个user 然后就可以拖 ...

  3. java 使用Date类、Calendar类,实现增加日期

    Date date= new Date(); System.out.println("Date date= new Date()中的date: "+date); 输出对象date: ...

  4. python统计订单走势

    #coding=utf-8 import numpy as np import pandas as pd import matplotlib.pyplot as plt import matplotl ...

  5. Vsphere日记03.ESXi5.5.client

    3.Vsphere ESXi 5.5 client Vsphere Client介绍 1.Vsphere Client定义 Vsphere client隶属于Vsphere套件,主要用于远程管理ESX ...

  6. Windows中搭建ftp服务器

    使用工具Quick Easy FTP Server Windows中搭建FTP服务器有什么用呢? 确实没有用,直到有一次,我在VM中安装了Linux虚拟机,但是文件怎么也上传不到这个虚拟机中. 然后用 ...

  7. Sping 的 BeanFactory 容器

    Sping 的 BeanFactory 容器 这是一个最简单的容器,它主要的功能是为依赖注入 (DI) 提供支持,这个容器接口在 org.springframework.beans.factory.B ...

  8. cvsba-1.0.0/utils/test_cvsba.cpp:.......error: ‘numeric_limits’ is not a member of ‘std’... error: expected primary-expression before ‘float’....

    cvsba库http://www.uco.es/investiga/grupos/ava/node/39,不知道怎么回事,记得以前编译没有错误,不知道作者是否更新了还是怎么着,新的现在有以下错误: 解 ...

  9. C#实现按键精灵的'找图' '找色' '找字'的功能

    http://www.cnblogs.com/JimmyBright/p/4355862.html 背景:游戏辅助功能通常使用按键精灵编写脚本,按键精灵的最大卖点就是能够找到画面中字,图,色,这对于模 ...

  10. 阿里云里Centos 7 PHP7环境配置 LNMP

    首先更新系统软件</str> $ yum update 安装nginx</str></str> 1.安装nginx源 $ yum localinstall http ...