ly.fan
/
xy-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化收起列表树的bug

Browse Source
wp1.0
fanluyan 1 year ago
parent d3ea703444
commit 818214d10d
1 changed files with 70 additions and 94 deletions
Show Stats Download Patch File Download Diff File

162
src/views/realTimeMonitor/components/siderBar.vue
Unescape Escape View File

@ -36,14 +36,14 @@
:data="lineTreeData"
:props="defaultProps"
node-key="id"
:default-expanded-keys="defaultExpandedKeys"
:default-expanded-keys="defaultExpandIds"
highlight-current
:expand-on-click-node="false"
:filter-node-method="filterNode"
:current-node-key="currentNodekey"
@node-expand="onHandleExpand"
@node-collapse="onHandleCollapse"
@node-click="handleNodeClick"
@node-expand="handleNodeExpand"
@node-collapse="handleNodeCollapse"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<!-- v-if="node.name === '收藏夹'" -->
@ -136,8 +136,8 @@ export default {
totalNum: "", //装置总数
zzradio: -1, //装置是否在线选择
lineTreeData: [],
defaultExpandedKeys: [], //默认展开
collapsedKeys: [], // 收起节点的key数组
defaultExpandIds: [], //默认展开
defaultProps: {
//指定参数格式回显数据
children: "list",
@ -276,21 +276,10 @@ export default {
this.onlineNum = res.data.onlineNum;
this.totalNum = res.data.totalNum;
this.currentData = JSON.parse(localStorage.getItem("currentData"));
this.lineTreeData.forEach((node) => {
if (node.list) {
node.list.forEach((child) => {
this.defaultExpandedKeys.push(child.id);
});
} else {
this.defaultExpandedKeys.push(node.id);
}
});
this.defaultExpandedKeys =
JSON.parse(localStorage.getItem("defaultKey")) !== null
? JSON.parse(localStorage.getItem("defaultKey"))
this.defaultExpandIds =
JSON.parse(localStorage.getItem("defultkeys")) !== null
? JSON.parse(localStorage.getItem("defultkeys"))
: []; //获取保存的defaultKey ;
console.log(this.defaultExpandedKeys);
if (this.lineTreeData[0].list[0].list.length > 0) {
}
if (
@ -304,6 +293,7 @@ export default {
this.currentNodekey = this.lineTreeData[0].id; //第一个数据
this.handleNodeClick(this.currentData);
}
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
this.scrollView();
@ -326,21 +316,7 @@ export default {
this.onlineNum = res.data.onlineNum;
this.totalNum = res.data.totalNum;
this.currentData = JSON.parse(localStorage.getItem("currentData"));
this.lineTreeData.forEach((node) => {
if (node.list) {
node.list.forEach((child) => {
this.defaultExpandedKeys.push(child.id);
});
} else {
this.defaultExpandedKeys.push(node.id);
}
});
this.defaultExpandedKeys =
JSON.parse(localStorage.getItem("defaultKey")) !== null
? JSON.parse(localStorage.getItem("defaultKey"))
: this.defaultExpandedKeys; //获取保存的defaultKey ;
console.log(this.defaultExpandedKeys);
// if (this.lineTreeData[0].list[0].list.length > 0) {
// }
if (
@ -354,6 +330,10 @@ export default {
this.currentNodekey = this.lineTreeData[1].id; //第一个数据
this.handleNodeClick(this.currentData);
}
this.defaultExpandIds =
JSON.parse(localStorage.getItem("defultkeys")) !== null
? JSON.parse(localStorage.getItem("defultkeys"))
: []; //获取保存的defaultKey ;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
this.scrollView();
@ -364,6 +344,61 @@ export default {
});
}
},
// 树节点展开
handleNodeExpand(data) {
// 保存当前展开的节点
let flag = false;
this.defaultExpandIds.some((item) => {
if (item === data.id) {
// 判断当前节点是否存在， 存在不做处理
flag = true;
return true;
}
});
if (!flag) {
// 不存在则存到数组里
this.defaultExpandIds.push(data.id);
localStorage.setItem(
"defultkeys",
JSON.stringify(this.defaultExpandIds)
);
}
},
// 树节点关闭
handleNodeCollapse(data) {
// 删除当前关闭的节点
this.defaultExpandIds.some((item, i) => {
if (item === data.id) {
this.defaultExpandIds.splice(i, 1);
localStorage.setItem(
"defultkeys",
JSON.stringify(this.defaultExpandIds)
);
}
});
this.removeChildrenIds(data); // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
},
// 删除树子节点
removeChildrenIds(data) {
console.log("我还有子节点");
const ts = this;
console.log(data);
if (data.list) {
console.log(data.list);
data.list.forEach(function (item) {
const index = ts.defaultExpandIds.indexOf(item.id);
if (index > 0) {
ts.defaultExpandIds.splice(index, 1);
}
ts.removeChildrenIds(item);
console.log(ts.defaultExpandIds);
});
localStorage.setItem(
"defultkeys",
JSON.stringify(this.defaultExpandIds)
);
}
},
//点击当前选中的treenode
handleNodeClick(data) {
@ -375,76 +410,17 @@ export default {
} else {
this.collectFlag = true;
}
if (data.id == "13009") {
// {
// "id": 13009,
// "towerid": 3980,
// "cmdid": "XYIGQ10C231000008",
// "equipname": "",
// "name": "XYIGQ10C231000008",
// "address": null,
// "protocol": 65285,
// "displayname": null,
// "model": null,
// "onlinestatus": 1,
// "hasPan": 0,
// "phase": "",
// "equipmentType": "",
// "isfavor": 0
// }
this.currentData = {
id: 13276,
towerid: 3981,
cmdid: "XYIGQ10C231000008",
equipname: "",
name: "XYIGQ10C231000008",
address: null,
protocol: 65285,
displayname: null,
model: null,
onlinestatus: 1,
hasPan: 0,
phase: "",
equipmentType: "",
isfavor: 0,
};
} else {
this.currentData = data;
}
//this.scrollView();
this.$store.commit("currentData", this.currentData); //将currentData保存在vuex中
this.$store.commit("termId", this.currentData.id); //将currentData保存在vuex中
this.$store.commit("protocol", this.currentData.protocol); //将currentData保存在vuex中
this.$store.commit("cmdId", this.currentData.cmdid); //将currentData保存在vuex中
this.$parent.getCurrentData();
//this.$refs.tree.scrollTo(data);
// localStorage.setItem("currentData", JSON.stringify(this.currentData));
},
//展开
onHandleExpand(data) {
this.defaultExpandedKeys.push(data.id);
console.log(this.defaultExpandedKeys);
localStorage.setItem(
"defaultKey",
JSON.stringify(this.defaultExpandedKeys)
);
},
//关闭
onHandleCollapse(data) {
console.log(this.defaultExpandedKeys);
let index = this.defaultExpandedKeys.findIndex(
(item) => item === data.id
);
if (index !== -1) this.defaultExpandedKeys.splice(index, 1);
console.log(this.defaultExpandedKeys);
localStorage.setItem(
"defaultKey",
JSON.stringify(this.defaultExpandedKeys)
);
},
scrollView() {
if (this.currentData) {
this.$nextTick(() => {

Write Preview
Loading…
Cancel
Save