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 Select操作大集合
May 26 Javascript
javascript类型转换示例
Apr 29 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
js禁止表单重复提交
Aug 29 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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中抽象类和接口的概念以及区别
2013/06/27 PHP
php语法检查的方法总结
2019/01/21 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
Node.js的特点详解
2017/02/03 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
python 字典(dict)按键和值排序
2016/06/28 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python基础教程项目二之画幅好画
2018/04/02 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
python 星号(*)的多种用途
2020/09/21 Python
亲戚结婚的请假条
2014/02/11 职场文书
运动会稿件100字
2014/02/21 职场文书
毕业生工作求职信
2014/06/30 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
高中运动会广播稿
2015/08/19 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
mysql全面解析json/数组
2022/07/07 MySQL