在移动端实现一个类似于element ui的el-tree的树形控件
在移动端实现一个类似于element ui的el-tree的树形控件,要实现当前高亮的叶子节点的父节点都要展开
场景：用树形控件展示数据结构为树状的带有目录的文章标题，用uni-app插件市场的ly-tree实现，
地址：https://ext.dcloud.net.cn/plugin?id=1000
【注】：该组件存在问题，没办法用组件自带的方法defaultExpandedKeys实现父节点自动展开，于是另外写了一个方法getAbsolutePathByNodeKey去获取当前节点的所有父节点，或者可以采用组件自带的getNodePath方法获取当前节点的所有父节点
<template>
<view class="">
<movable-area class="moableArea" @tap="showNav">
<movable-view
class="movableView"
direction="vertical"
x="600rpx"
y="800rpx"
>
<view class="navigator-button">
<u-icon name="list-dot"></u-icon>
导航
</view>
</movable-view>
</movable-area>
<u-popup v-model="showNavList" mode="bottom" border-radius="18">
<view class="nav-top">
<view class="nav-title">导航</view>
<view class="learn-center-search">
<u-search
v-model="filterText"
:show-action="false"
height="80"
shape="square"
bg-color="#FFF"
placeholder-color="#999999"
border-color="#D9D9D9"
>
</u-search>
</view>
</view>
<scroll-view
scroll-y
style="width: 100%; height: 100%; padding-bottom: 20rpx"
>
<view class="nav-content">
<ly-tree
ref="tree"
:tree-data="manualList"
:filter-node-method="filterNode"
:ready="ready"
node-key="id"
@node-expand="handleNodeExpand"
@node-click="handleNodeClick"
:props="props"
:check-on-click-node="true"
:highlight-current="true"
:current-node-key="id"
:default-expanded-keys="defaultExpandedKeys"
:accordion="true"
>
</ly-tree>
</view>
</scroll-view>
</u-popup>
</view>
</template>
<script>
import LyTree from "@/components/ly-tree/ly-tree.vue";
export default {
data() {
return {
showNavList: false,
ready: false, //这里用于自主控制loading加载状态，避免异步正在加载数据的空挡显示“暂无数据”
manualList: [],
props: {
label: "name",
children: "children",
},
filterText: "",
defaultExpandedKeys: [],
parentIdList: [],
parentList: [],
};
},
components: {
LyTree,
},
props: {
id: {
type: String,
default: () => {
return "";
},
},
},
mounted() {
let vm = this;
vm.$nextTick(() => {
vm.getManualList();
});
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
},
methods: {
//可以通过这个算法去获取当前节点的所有父节点
// getAbsolutePathByNodeKey(key) {
// let vm = this;
// let stack = [];
// function find(key, rest) {
// for (let i = 0, arr = rest, len = arr.length; i < len; i++) {
// let node = arr[i];
// stack.push(node.id);
// if (node.id === key) {
// return stack;
// } else if (node.children && node.children.length > 0) {
// let temp = find(key, node.children);
// if (temp[temp.length - 1] === key) return temp;
// else temp.pop();
// if (i + 1 < len) continue;
// return temp;
// } else {
// stack.pop();
// if (i + 1 < len) continue;
// return stack;
// }
// }
// }
// return find(key, vm.treeData);
// },
showNav() {
let vm = this;
vm.showNavList = true;
vm.parentIdList = [];
vm.$nextTick(() => {
if (vm.id) {
vm.$refs.tree.setCurrentKey(vm.id);
//通过getNodePath方法找到当前节点的所有父节点，并把id都push到一个空数组里
vm.parentList = vm.$refs.tree.getNodePath(vm.id);
for (let i = 0; i < vm.parentList.length; i++) {
vm.parentIdList.push(vm.parentList[i].id);
}
vm.defaultExpandedKeys = vm.parentIdList;
// vm.defaultExpandedKeys = vm.getAbsolutePathByNodeKey(
// vm.currentNodeKey
// );
}
});
},
//过滤节点的方法
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
// uni-app中emit触发的方法只能接受一个参数，所以会回传一个对象，打印对象即可见到其中的内容
handleNodeClick(obj) {
if (obj.data.type == "article") {
let platformList = {
1: "圆方1.0",
2: "数据集市",
3: "Seele平台",
4: "圆方2.0",
};
switch (obj.data.rootName) {
case "最新动态":
uni.navigateTo({
url: `/pages/learnCenter/components/detailPage?newsId=${
obj.data.id
}&platform=${
platformList[obj.data.data.platform]
}&module=${obj.data.rootName}`,
});
break;
case "使用手册":
uni.navigateTo({
url: `/pages/learnCenter/components/detailPage?issueId=${
obj.data.id
}&platform=${
platformList[obj.data.data.platform]
}&module=${obj.data.rootName}`,
});
break;
case "教学社区":
uni.navigateTo({
url: `/pages/learnCenter/components/detailPage?documentId=${
obj.data.id
}&platform=${
platformList[obj.data.data.platform]
}&module=${obj.data.rootName}`,
});
break;
case "视频教学":
uni.navigateTo({
url: `/pages/learnCenter/components/videoDetail?videoId=${
obj.data.id
}&platform=${
platformList[obj.data.data.platform]
}&module=${obj.data.rootName}`,
});
break;
default:
break;
}
}
},
handleNodeExpand(obj) {
console.log("handleNodeExpand", obj);
},
//处理数据结构的方法
parse(root, newRoot) {
let vm = this;
let i;
let len;
let node;
let newNode;
len = root.length;
for (i = 0; i < len; i++) {
node = root[i];
newNode = {};
if (
node.issueId ||
node.newsId ||
node.documentId ||
node.videoId
) {
if (node.issueId) {
newNode.id = node.issueId;
newNode.rootName = "使用手册";
}
if (node.newsId) {
newNode.id = node.newsId;
newNode.rootName = "最新动态";
}
if (node.documentId) {
newNode.id = node.documentId;
newNode.rootName = "教学社区";
}
if (node.videoId) {
newNode.id = node.videoId;
newNode.rootName = "视频教学";
}
newNode.name = node.title;
newNode.status = node.status;
newNode.type = "article";
newNode.isSelect = false;
} else if (node.catalogueId) {
newNode.id = node.catalogueId;
newNode.name = node.catalogueName;
newNode.type = "catalog";
newNode.children = [];
newNode.catalogNode = true;
newNode.topId = node.topId;
if (node.catalogueResponseList) {
vm.parse(node.catalogueResponseList, newNode.children);
}
if (node.objectList) {
vm.parse(node.objectList, newNode.children);
}
}
newNode.data = {
...node,
};
newRoot.push(newNode);
}
},
//获取后台数据
getManualList() {
let vm = this;
return new Promise((resolve, reject) => {
vm.$req
.doRequest({
alias: "dcs-catalogue-getCatalogueTree",
query: {
id: "0",
type: "2",
},
})
.then((res) => {
if (res.code == 0) {
vm.tempList = res.data.filter(
(item) => item.catalogueName != "优秀案例"
);
vm.parse(vm.tempList, vm.manualList);
vm.ready = true;
}
return resolve();
});
});
},
},
};
</script>
<style lang="less" scoped>
/deep/.ly-tree-node__content.is-current {
background-color: inherit;
color: #0a63f1;
}
/deep/.is-expanded {
}
.nav-top {
background: #fbfbfb;
border-bottom: 1px solid #e9e9e9;
padding: 36rpx 0 34rpx;
.nav-title {
margin: 0 46rpx 26rpx;
font-family: PingFangSC-Medium;
font-size: 32rpx;
color: #333333;
letter-spacing: 0.02px;
}
.u-search {
margin: 42rpx auto 0 !important;
width: 90%;
}
}
.nav-content {
background: #fff;
padding: 20rpx 46rpx 38rpx;
max-height: 962rpx;
/deep/.ly-tree {
padding: 0 !important;
}
/deep/.ly-tree-node__label {
font-size: 30rpx;
}
/deep/.ly-empty {
margin-top: 48rpx;
}
}
.navigator-button {
background: #ffffff;
border-radius: 39rpx 0 0 39rpx;
border-radius: 39rpx 0 0 39rpx;
box-shadow: -4rpx 0 10rpx 0 rgba(0, 0, 0, 0.2);
font-size: 28rpx;
color: #202020;
padding-left: 16rpx;
/deep/ .uicon-list-dot {
top: 3.8rpx !important;
margin-right: 1px;
font-size: 36rpx !important;
margin: 0 10rpx 0 10rpx;
color: #000;
}
}
.moableArea {
position: fixed;
top: 0;
left: 50rpx;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 99999;
}
.movableView {
pointer-events: auto;
width: 186rpx;
height: 78rpx;
line-height: 78rpx;
}
</style>