分类列表优化

mayf

2024-09-20 9158f7777726d871d8839130d0950db0b21a2233

分类列表优化

 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