ElementUI中el-tree节点的操作的实现


Posted in Javascript onFebruary 27, 2020

其实tree的有些方法用起来是很方便的,
this.$refs.tree.getCheckedKeys();这个原生态的方法。官方文档上说的是,返回一个数组。有了这个方法,我们就可以得到选中的每个节点的id,拿到了id,那所有的问题就迎刃而解了。
废话不多说,直接上代码

html

<div id="app">
  <el-row>
    <el-button @click="checkedKeys">得到节点id</el-button>
    <el-button @click="addNode">添加节点</el-button>
    <el-button @click="checkedKeys">修改节点</el-button>
    <el-button @click="deleteNode">删除节点</el-button>
    <br/>
    <br/>

    <el-tree
         ref="tree"
         :data="treeList"
         :props="defaultProps"
         @node-click="handleNodeClick"
         show-checkbox=true
         node-key="id"
         :check-strictly="true"
        >
    </el-tree>
    <el-input>输入框</el-input>
    <el-dialog title="添加"
         :visible.sync="dialogVisible"
        >
      <el-form ref="form">
        <el-form-item label="节点父类型">
        <el-select placeholder="请选择要添加节点的父节点" v-model="treeNode.parentId" @change="selectChange" >
          <el-option label="根节点" :value="0"></el-option>
          <el-option v-for="item in treeListData" :label="item.categoryName" :value="item.nodeId"></el-option>
        </el-select>
      </el-form-item>
          <el-form-item label="节点名称">
            <el-input placeholder="请输入节点名称" v-model="treeNode.categoryName" style="width: 220px"></el-input>
          </el-form-item>
    </el-form>

      <span>
        <el-button @click="cancleSaveNode">
          取消
        </el-button>
        <el-button @click="saveNode">
          确定
        </el-button>
      </span>

    </el-dialog>

  </el-row>

</div>

js代码

<script type="text/javascript">


  var _treeNode={
    nodeId:0,
    categoryName:"",
    parentId:0
  }

  var app = new Vue({
    el:'#app',
    data:{
      treeNode:_treeNode,
      treeList:[],
      treeListData:[], // 无层级结构节点数据
      defaultProps:{
        children: 'childList',
        label: 'name'
        /* label: 'categoryName'*/
      },
      dialogVisible:false, // 对话框,默认不打开
      api:{
        treeDataList:"/category/treeList.do",  // 得到节点数据,无层级结构 GET
        saveTreeNode:"/category/saveTreeNode.do",  // 得到节点数据,无层级结构 GET
        deleteTreeNode:"/category/deleTreeNode.do",
      }
    },
    methods: {
      cateListFunction: function () {
        $.ajax({
          type: "get",
          url: "/category/cateList.do",
          success: function (result) {
            app.cateList = result;
            app.treeList=result;
          }, error: function (result) {
          }
        });
      },
      // 点击节点名称触发的事件
      handleNodeClick: function (data) {
        alert(data.id);
        console.log(data);
      },
      // 获得选中的节点的key
      checkedKeys:function (data) {
        alert(JSON.stringify(this.$refs.tree.getCheckedKeys()));
      },
      // 添加节点查询所有节点的方法
      addNode:function () {
        // 查询所有节点数据无层级结构
        app.getTreeNode();
        app.dialogVisible=true;
      },
      // 保存节点
      saveNode:function () {
       //alert(app.treeNode.categoryName+app.treeNode.parentId);
       axios.post(app.api.saveTreeNode,app.treeNode).then(function (resule) {
         app.dialogVisible=false;
         app.treeNode.parentId=0;
         app.treeNode.categoryName="";
         app.cateListFunction();
       });

      },
      cancleSaveNode:function () {
        app.dialogVisible=false;
        app.treeNode.parentId=0;
        app.treeNode.categoryName="";

      },
      // 下拉框选中事件
      selectChange:function (val) {
        // select控件的option绑定的值为节点的id,我们将值绑定在要添加的元素的父id
        //alert("得到节点类型"+val);
      },
      // 批量删除节点(若有子节点则不予删除)
      deleteNode:function () {
        app.getTreeNode();
        var str=[];
        str =this.$refs.tree.getCheckedKeys();
         if(str.length<=0){ // 因为vue返回的是选中的key的数组
                    // ,如果没有选择任何元素返回 "[]",这是两个元素,所以我们判断长度为2时,为空
           app.$message.error("请至少选择一个节点");
           return ;
         }
        for(var i in str){
          for(var j in app.treeListData){
            if(app.treeListData[j].parentId == str[i]){
              app.$message.error("父节点不可被删除");
              return;
            }
          }
        }
        axios.post(this.api.deleteTreeNode,str).then(function (result) {
          app.$message({message: '删除成功', type: 'success'});
          app.getTreeNode();
          app.cateListFunction();
        });

      },getTreeNode:function () {
        // 查询所有节点数据无层级结构
        axios.get(this.api.treeDataList)
          .then(
            function(result){
              // vue给我们封装的得,我们所得到的数据在返回的对象的data属性里
              app.treeListData=result.data;
            });
      }

    },
      created: function () {
        this.getTreeNode();
        this.cateListFunction();
      }
  });
</script>

controller

/**
   * 保存节点
   */
  @RequestMapping("/saveTreeNode.do")
  @ResponseBody
  public void saveTreeNode(@RequestBody TbCategory category){
    System.out.println(category.getCategoryName() +"------" +category.getParentId());
    categoryService.insert(category);
  }


  @RequestMapping("/deleTreeNode.do")
  @ResponseBody
  public void deleTreeNode(@RequestBody String str){

    System.out.println(str);
    String [] strIds = str.substring(1,str.length()-1).split(",");
    for(int i =0;i<strIds.length;i++){
      categoryService.delete(Long.valueOf(strIds[i])); // 1,2
    }
  }

以上代码真的没有什么好解释的,大家直接按照我的代码,就不会有问题了

截图:

ElementUI中el-tree节点的操作的实现

ElementUI中el-tree节点的操作的实现

ElementUI中el-tree节点的操作的实现

到此这篇关于ElementUI中el-tree节点的操作的实现的文章就介绍到这了,更多相关ElementUI el-tree节点内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 继承机制的实现
Aug 12 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 #Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 #Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 #Javascript
BootStrap前端框架使用方法详解
Feb 26 #Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 #Javascript
javascript 数组精简技巧小结
Feb 26 #Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 #Javascript
You might like
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
js操作select控件的几种方法
2010/06/02 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
js数组的基本使用总结
2021/01/18 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
大学生饮食连锁店创业计划书
2014/01/17 职场文书
社团文化节策划书
2014/02/01 职场文书
大家检讨书5000字
2014/02/03 职场文书
查摆剖析材料范文
2014/09/30 职场文书
村党组织公开承诺书
2015/04/30 职场文书
开票证明
2015/06/23 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书