vue中使用layui实现树形菜单增删改查功能

第一步：去官网下载layui组件https://www.layui.com/

下载并解压得到：

第二步：将解压后的上图紫色箭头所指的layui文件夹放入自己vue项目中的static目录下

第三步：在项目中index.html文件中引入

    <link type="text/css" rel="stylesheet" href="./static/layui/css/layui.css"/>
    <script type="text/javascript" src="./static/layui/layui.js"></script>

第四步：使用

在所需要的使用layui的vue文件中写入

<div id="test9" class="demo-tree demo-tree-box" style="width: 100%; height: 100%; overflow: hidden;"></div>

在mounted函数中注册所使用的插件

mounted(){
   layui.use(['tree', 'util'], function(){
      var tree = layui.tree
      ,layer = layui.layer
      ,util = layui.util
      //模拟数据1
      ,data1 = [{
        title: '江西'
        ,id: 1
        ,children: [{
          title: '南昌'
          ,id: 1000
          ,children: [{
            title: '青山湖区'
            ,id: 10001
          },{
            title: '高新区'
            ,id: 10002
          }]
        },{
          title: '九江'
          ,id: 1001
        },{
          title: '赣州'
          ,id: 1002
        }]
        },{
          title: '广西'
          ,id: 2
          ,children: [{
            title: '南宁'
            ,id: 2000
          },{
            title: '桂林'
            ,id: 2001
          }]
        },{
          title: '陕西'
          ,id: 3
          ,children: [{
            title: '西安'
            ,id: 3000
          },{
            title: '延安'
            ,id: 3001
        }]
      }]
        //基本演示
      //开启节点操作图标
      tree.render({
        elem: '#test9'
        ,data: data1
        ,edit: ['add', 'update', 'del'] //操作节点的图标
        ,click: function(obj){
          // layer.msg(JSON.stringify(obj.data));
        }
        ,operate: function(obj){
        var type = obj.type; //得到操作类型：add、edit、del
        var data = obj.data; //得到当前节点的数据
        var elem = obj.elem; //得到当前节点元素
        
        //Ajax 操作
        var id = data.id; //得到节点索引
        console.log(id)
        if(type === 'add'){ //增加节点
          //返回 key 值
          return 123;
        } else if(type === 'update'){ //修改节点
          console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
        } else if(type === 'del'){ //删除节点
          
        }
        }
      });
    })
  },

 注意：树形菜单结构的增删改查函数，需要通过operate函数去触发

效果如图：