Tab物料的slot组件总是重新加载当修改prop时。
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức phù hợp với người mới
- 35/100
- Loại issue
- Lỗi
- Độ rõ ràng
- Khá rõ ràng
- Mức độ hoạt động
- Đình trệ
- Công nghệ
- typescript
- Lĩnh vực
- frontend
Hướng nghiên cứu
Bắt đầu với hàm setValue của prop tabs và lệnh gọi node.children.mergeChildren của nó trong schema được nêu trong báo cáo. Tái hiện việc thay đổi prop tab với một thành phần slot lớn và theo dõi lý do slot bị mount lại; hoàn tất khi việc thay đổi prop tab không còn tải lại nội dung slot hiện có.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
每次修改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
}
},
},
`
- Ngôn ngữ chính
- TypeScript
- Star
- 15.9k
- Fork
- 2.7k
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Chuẩn bị môi trường
Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của alibaba/lowcode-engine
-
引擎未正确抛出错误信息Đang mở
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 68/100
alibaba/lowcode-engine#3036 ·
-
可视化页面编辑画布区域怎么设置组件不允许拖动排序Đang mở
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 25/100
alibaba/lowcode-engine#3158 ·
-
为啥停止维护啊？谷歌A2UI不也是这一套东西Đang mở
Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 25/100
alibaba/lowcode-engine#3157 · 2 bình luận · 4 reaction ·
-
停止维护了，vue3的 可转站TinyEngineĐang mở
Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 15/100
alibaba/lowcode-engine#3156 · 3 reaction ·
-
parts：造物问题Đang mở
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 48/100
alibaba/lowcode-engine#3155 · 1 bình luận ·
Tất cả issue của alibaba/lowcode-engine
Issue tương tự
-
enhancement
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 80/100
alunduil/projects-v2-sync#21 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 85/100
-
enhancement minor
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 74/100
testcontainers/testcontainers-node#1539 ·
Maintainer thường phản hồi trong vòng 1 ngày
-
bug
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 70/100
christopher-buss/eslint-plugin-flawless#72 ·
Maintainer thường phản hồi trong vòng 1 ngày
-
cleanName keeps a state code that's joined to the word before it (SavannahGa → "Savannah Ga")Đang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 82/100
openwatersio/slackwater-database#281 ·
Maintainer thường phản hồi trong vòng 1 ngày