From 04be125365bfd254166072f75da87e406f633ba3 Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期四, 09 一月 2025 18:36:56 +0800
Subject: [PATCH] Merge branch 'master' of http://47.96.225.205:8888/r/operation_pc-v2
---
pages/goods/category-list.vue | 42 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 42 insertions(+), 0 deletions(-)
diff --git a/pages/goods/category-list.vue b/pages/goods/category-list.vue
index cb1897f..dc51929 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,
@@ -16,6 +19,44 @@
canNewChild: (row) => !row.parentId,
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,
+ childrenCount: Array.isArray(i.children) ? i.children.length : 0,
+ 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) {
@@ -42,6 +83,7 @@
),
},
{ label: '排序', prop: 'sortBy' },
+ { label: '品种数量', formatter: (row) => row.childrenCount },
{
label: '是否显示',
formatter: (row) => (
--
Gitblit v1.9.3