怎么在ElementUI中操作el-tree节点

发布时间:2021-04-16 17:37:19 作者:Leah
来源:亿速云 阅读:371

这期内容当中小编将会给大家带来有关怎么在ElementUI中操作el-tree节点,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

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" ></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节点了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. jQuery节点操作
  2. DOM节点操作

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

element el-tree

上一篇:使用C语言怎么实现一个密码本

下一篇:怎么在Python中利用递归打印多重列表

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》