Skip to content

Tab物料的slot组件总是重新加载当修改prop时。 #3103

Open
@SSSliangfeng

Description

@SSSliangfeng

每次修改tab prop时(这个属性有个setValue会更新children的值),tab children slot里的组件总是remount。当slot组件大时就会导致设计页面卡顿。希望有一种方法能让slot不重复加载。
下面是tab的schema配置。

{
      "componentName": "ColorfulTab",
      "title": "选项卡",
      "category": "布局容器类",
      "group": "高级组件",
      "configure": {
        "props": [
          {
            "name": "tabs",
            "title": "标签项",
            "setter": {
              "componentName": "EventEditSetterRefactor",
              "props": {
                "placeholder": "请输入标签名"
              }
            },
            "extraProps": {
              "display": "accordion",
              "getValue": {
                "type": "JSFunction",
                "value": "function getValue(target) {\n          const map = target.node.children.map((child) => {\n            const key = child.getPropValue('key') ? String(child.getPropValue('key')) : child.id;\n  const buttonConfig = child.getPropValue('buttonConfig') ? child.getPropValue('buttonConfig') : { \n funcShow: {}, functional: {}, tooltip: {}, btnStyle: {}, fontStyle: {}, \n };           return {\n              key,\n               title: child.getPropValue('tab'),\n  buttonConfig          };\n          });\n          return map;\n        }"
              },
              "setValue": {
                "type": "JSFunction",
                "value": "function setValue(target, value) {\n          const { node } = target;\n          const map = {};\n\n          if (!Array.isArray(value)) {\n            value = [];\n          }\n console.info('value node', value);         value.forEach((item) => {\n            const tabItem = Object.assign({}, item);\n            map[item.key] = tabItem;\n          });\n\n          node.children.mergeChildren(\n            (child) => {\n       const children = child.getPropValue('children') || {type: 'JSSlot', params: undefined, value: undefined, title: undefined, name: undefined}; child.setPropValue('children', children); const key = String(child.getPropValue('key') || child.id);\n              if (Object.hasOwnProperty.call(map, key)) {\n                child.setPropValue('tab', map[key].tab || map[key].title);child.setPropValue('title', map[key].tab || map[key].title);\n     console.info('node key', key);           delete map[key];\n                return false;\n              }\n              return true;\n            },\n            (children) => {\n              const items = [];\nconsole.info('child 1', children, map);              for (const key in map) {\n                if (Object.hasOwnProperty.call(map, key)) {\n                  items.push({\n                    componentName: 'ColorfulTabPane',\n                    props: map[key],\n                  });\n                }\n              }\n              return items;\n            },\n            (child1, child2) => {\n              const a = value.findIndex(\n                (item) => String(item.key) === String(child1.getPropValue('key') || child1.id),\n              );\n              const b = value.findIndex(\n                (item) => String(item.key) === String(child2.getPropValue('key') || child2.id),\n              );\n console.info('node sorter');             return a - b;\n            },\n          );\n        }"
              }
            }
          },
          
        "component": {
          "isContainer": true,
          "nestingRule": {
            "childWhitelist": [
              "ColorfulTabPane"
            ]
          }
        },
        "advanced": {
          "initialChildren": [
            {
              "componentName": "ColorfulTabPane",
              "props": {
                "key": "node_01",
                "tab": "Item 1",
                "title": "Item 1",
                "children": {
                  "type": "JSSlot",
                  "value": []
                }
              }
            },
            {
              "componentName": "ColorfulTabPane",
              "props": {
                "key": "node_02",
                "tab": "Item 2",
                "title": "Item 2",
                "children": {
                  "type": "JSSlot",
                  "value": []
                }
              }
            },
            {
              "componentName": "ColorfulTabPane",
              "props": {
                "key": "node_03",
                "tab": "Item 3",
                "title": "Item 2",
                "children": {
                  "type": "JSSlot",
                  "value": []
                }
              }
            }
          ]
        },
        "supports": {
          "style": true
        }
      },
      
    },
`


Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions