# m-tree
#### 本组件为 leo-tree 增强版
#### 本插件基于 作者： leo9012 发行的leo-tree v1.0.1
#### email:121959858@qq.com
#### props
#### data 数据源
#### defaultProps 配置选项，return { id: 'id', label: 'label', children: 'children' }
#### emit
#### 参数：
:data tree数据原{id:1,
label:'',
children:[]} 每个节点必须有children,无子节点设置为[];
:divider 开启节点间分割线, true or false; 不设置为false;
:edit 开启编辑功能,数据true or false; 不设置为false;
:unfold 控制默认展开状态, true 为默认展开状态 or false为默认收缩状态; 不设置为false;
开启后在节点右边增加 + - ↑ ↓按钮，可以绑定up-item down-item add-item，delete-item，long-press事件;
#### 方法：
@node-click 监听节点点击事件 返回节点数据 {id: id, label: label, pid: pid,* 节点所有数据};
@up-item 监听节点up上移事件 返回节点数据{item: this.item, items: this.items, index: this.index};
@down-item 监听节点down下移事件 返回节点数据 {item: this.item, items: this.items, index: this.index};
@add-item 监听节点新增事件 返回节点数据 {id: id, label: label, pid: pid,* 节点所有数据}; id:0时根节点新增，id:x, 为对应x节点建立子节点;
@edit-item 监听节点编辑事件 返回节点ID {id: id, label: label, pid: pid,* 节点所有数据};
@delete-item 监听节点删除事件 返回节点ID {id: id};
@finger-action 监听节点滑动事件 返回节点数据 {item:选择节点数据, items: 选择节点同级列表,action:number}; action:1上滑, 2下滑，3左滑，4右滑
@long-press 监听节点长按事件 返回节点数据 {id: id, label: label, pid: pid,* 节点所有数据};
### 使用
#### 本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。
<template>
<view class="content">
<view class="user-box">
<m-tree
class="u-p-l-40"
ref="mtree"
:defaultProps="defaultProps"
:data="tree"
:divider="divider"
:edit="edit"
:unfold="true"
@node-click="nodeClick"
@up-item="upNode"
@down-item="downNode"
@add-item="addNode"
@edit-item="editNode"
@delete-item="deleteNode"
@finger-action="fingerAction"
@long-press="longpressNode"></m-tree>
</view>
</view>
</template>
<script>
export default {
data() {
return {
/*
tree 数据
*/
defaultProps: {
id: 'id', // 此项为id项的key
children: 'children', // 此项为修改子集数据的key
label: 'label' // 此项为修改显示数据的key
},
divider: false,
edit: true,
tree: [
{
checked: false,
children: [{
children: [{
children: [],
id: 111,
label:"芙蓉区",
name: "芙蓉区",
pid: "11"
}],
id: 11,
label:"长沙市",
name: "长沙市",
pid: "1"
}
],
id: 1,
label:"湖南省",
name: "湖南省",
pid: "0"
}
]
}
},
methods: {
//遍历id节点并删除
removeNodeData(datas, id){ //遍历树 获取id数组
for(var i in datas){
if(id===datas[i].id) {
// datas.push(datas[i]);
console.log('要删除项目：', datas[i].id);
datas.splice(i,1);
break;
} else {
if(datas[i].children){ //存在子节点就递归
this.removeNodeData(datas[i].children, id);
}
}
}
},
//遍历id节点添加子项
addNodeData(datas, id, nodedata){ //遍历树 获取id数组
var addflag = false;
if(id===0) {
datas.unshift(nodedata);
addflag=true;
} else {
for(var i in datas){
console.log(JSON.stringify(datas[i]));
if(id===datas[i].id) {
// datas.push(datas[i]);
console.log('要增加项目：', datas[i].id, nodedata);
datas[i].children.unshift(nodedata);
addflag=true;
break;
} else {
if(datas[i].children){ //存在子节点就递归
this.addNodeData(datas[i].children, id, nodedata);
}
}
}
}
return addflag;
},
//节点点击事件
nodeClick(e) {
console.log('点击的项目', JSON.stringify(e));
},
//节点up按钮点击事件
upNode(e) {
const that = this;
console.log('upNode');
if(e.index!=0){
// 根据自身需求，自行修改数据处理方法；
// up上移操作，排序并更新tree中对应元素sort属性
var data = {
pnode: {},
itemA: {id: e.items[e.index-1].id, sort: e.items[e.index].sort},
itemB: {id: e.items[e.index].id, sort: e.items[e.index-1].sort},
}
that.$refs.mtree.treeSort(that.tree, e.item.pid, data); // 调用组件方法 排序sort 从小到大排序
}
},
//节点down按钮点击事件
downNode(e) {
const that = this;
console.log('downNode');
if(e.index != e.items.length-1){
// 根据自身需求，自行修改数据处理方法；
// down下移操作，排序并更新tree中对应元素sort属性
var data = {
pnode: {},
itemA: {id: e.items[e.index+1].id, sort: e.items[e.index].sort},
itemB: {id: e.items[e.index].id, sort: e.items[e.index+1].sort},
}
that.$refs.mtree.treeSort(that.tree, e.item.pid, data); // 调用组件方法 排序sort 从小到大排序
}
},
//节点新增按钮点击事件
addNode(e) {
//e.pNodeData, e.addContent
console.log('点击的项目add', JSON.stringify(e));
// 根据自身需求，自行修改数据新增方法；
// 可以配合异步请求 执行服务器删除操作
let data={};
if(e.id===0) {
data={id: this.tree.length + 1, pid: e.id, label:'新增节点', name:'新增节点',children:[]}
} else {
data={id: e.pNodeData.id + e.pNodeData.children.length + 100, pid: e.pNodeData.id, label: e.addContent, name: e.addContent,children:[]}
}
if(data) {
this.addNodeData(this.tree, e.pNodeData.id, data);
}
},
//节点更新按钮点击事件
editNode(e) {
//e.pNodeData, e.editContent
console.log('点击的项目add', JSON.stringify(e));
if(e.editContent.length >= 2 && e.editContent.length <= 16) {
e.pNodeData.label = e.editContent;
e.pNodeData.name = e.editContent;
}
// 节点已更新
/* const that = this;
var updateData = {
data: {id: e.pNodeData.id, name: e.editContent},
params: {id: e.pNodeData.id}
};
new AreaService().update(updateData).then(result => {
if(result.code === 0) {
if(result.data.id) {
that.getList();
} else {
that.getList();
}
CommonUtil.toast(`更新巡更区域成功`, 2000);
} else {
CommonUtil.toast(`更新失败:` + result.message, 2000);
}
})
CommonUtil.toast(e.editContent + `更新成功`, 2000); */
},
//节点删除按钮点击事件
deleteNode(e) {
console.log('点击的项目delete', JSON.stringify(e));
// 根据自身需求，自行修改数据删除方法；
if(this.removeNodeData(this.tree, e.id)) {
// 可以配合异步请求 执行服务器删除操作
console.log('删除ID:', e,id, '数据');
}
},
//节点滑动
fingerAction(e) {
console.log('节点滑动fingerAction', JSON.stringify(e));
},
//节点选线长按事件
longpressNode(e) {
console.log('长按的项目longpress', JSON.stringify(e));
}
}
}
</script>
<style lang="scss">
page{
background-color: #ededed;
}
.user-box{
background-color: #fff;
}
</style>