From 9158f7777726d871d8839130d0950db0b21a2233 Mon Sep 17 00:00:00 2001
From: mayf <m13160102112@163.com>
Date: 星期五, 20 九月 2024 14:16:41 +0800
Subject: [PATCH] 分类列表优化
---
pages/goods/category-list.vue | 40 ++++++++++++++++++++++++++++++++++++++++
1 files changed, 40 insertions(+), 0 deletions(-)
diff --git a/pages/goods/category-list.vue b/pages/goods/category-list.vue
index cb1897f..ded0004 100644
--- a/pages/goods/category-list.vue
+++ b/pages/goods/category-list.vue
@@ -3,10 +3,13 @@
</template>
<script>
+import cloneDeep from 'lodash.clonedeep'
import { getSortConfig } from '@/utils/form-item-config'
export default {
data() {
return {
+ originalList: [],
+ expandIds: [],
tableConfig: {
url: 'flower/api/flower/category/tree',
hasPagination: false,
@@ -17,6 +20,43 @@
dialogAttrs: {
width: '70%',
},
+ /**
+ * 优化树形数据量较大渲染卡顿的问题
+ * 使用tree的懒加载后更新数据刷新树比较麻烦，暂时不考虑这个方案
+ * 由于该分类列表最多两级
+ * 目前在渲染树时先将每个父节点下的子元素children取第一个渲染树结构，然后在展开节点时通过id找到原始的children做替换
+ * 考虑到更新数据时某些节点可能已经展开，已经展开的节点不能取第一个子元素，所以要记录展开的节点
+ * 1.在expandChange事件中更新展开的节点列表
+ * 2.当通过搜索条件搜索时，如果某些父节点不在搜索结果中，也要将它们从展开的节点中去除
+ */
+ afterRequest: (list) => {
+ this.originalList = cloneDeep(list)
+ this.expandIds = this.expandIds.filter((i) =>
+ list.find((item) => item.id === i)
+ )
+ return list.map((i) => ({
+ ...i,
+ children: this.expandIds.includes(i.id)
+ ? i.children
+ : i.children.slice(0, 1),
+ }))
+ },
+ tableEventHandlers: {
+ expandChange: (row, expand) => {
+ if (expand) {
+ if (!this.expandIds.includes(row.id)) {
+ this.expandIds.push(row.id)
+ }
+ row.children =
+ this.originalList.find((i) => i.id === row.id)?.children || []
+ } else {
+ const index = this.expandIds.indexOf(row.id)
+ if (index !== -1) {
+ this.expandIds.splice(index, 1)
+ }
+ }
+ },
+ },
beforeOpen(row, isNew) {
if (isNew && row.name) {
row.parentName = row.name
--
Gitblit v1.9.3