Open
Description
每次修改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
Labels
No labels