Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
SSSliangfeng opened this issue Oct 20, 2024 · 0 comments
Open

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

SSSliangfeng opened this issue Oct 20, 2024 · 0 comments

Comments

@SSSliangfeng
Copy link

每次修改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
        }
      },
      
    },
`


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant