第一步：去官网下载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函数去触发
效果如图：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149775.html
