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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
Node.js安装配置图文教程
May 10 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Javascript设计模式之原型模式详细
Oct 05 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正则preg_replace_callback函数用法实例
2015/06/01 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
Python中字符串的处理技巧分享
2016/09/17 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python GUI实例学习
2017/11/21 Python
解决Python二维数组赋值问题
2019/11/28 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
机械个人求职信范文
2014/01/24 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL