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 相关文章推荐
Eval and new funciton not the same thing
Dec 27 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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 透明水印生成代码
2012/08/27 PHP
apache php模块整合操作指南
2012/11/16 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
最基础的Python的socket编程入门教程
2015/04/23 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Python跳出多重循环的方法示例
2019/07/03 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
法学专业个人求职信
2013/09/26 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
争先创优心得体会
2014/09/12 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
预备党员介绍人意见
2015/06/01 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
Nginx的gzip相关介绍
2022/05/11 Servers