mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [transfer] render the option's label correctly when there's only an empty comment in the default slot (#18416)

Browse Source 
* fix(components): [transfer] render the option's label correctly

* fix(components): [transfer] update following review advice and add tests

* test(components): [transfer] update test suits name
This commit is contained in:
Lo 2024-10-02 16:17:37 +08:00 committed by GitHub
parent 0b87b9f033
commit 86b01eed9f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 125 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
packages/components/transfer/__tests__/transfer.test.tsx
View File

@ -214,4 +214,122 @@ describe('Transfer', () => {
expect(app.rightPanel.query).toBeFalsy()
})
})
describe('render default slot', () => {
it('single comment node', () => {
const wrapper = mount(Transfer, {
props: {
data: getTestData(),
},
slots: {
default: '<!-- -->',
},
})
const leftPanel = wrapper.find('.el-transfer-panel')
const labels = leftPanel.findAll(
'.el-transfer-panel__body .el-checkbox__label'
)
expect(labels.map((l) => l.text())).toMatchInlineSnapshot(`
[
"备选项 1",
"备选项 2",
"备选项 3",
"备选项 4",
"备选项 5",
"备选项 6",
"备选项 7",
"备选项 8",
"备选项 9",
"备选项 10",
"备选项 11",
"备选项 12",
"备选项 13",
"备选项 14",
"备选项 15",
]
`)
})
it('multiple comment nodes', () => {
const wrapper = mount(Transfer, {
props: {
data: getTestData(),
},
slots: {
default: `
<!-- -->
<!-- -->
`,
},
})
const leftPanel = wrapper.find('.el-transfer-panel')
const labels = leftPanel.findAll(
'.el-transfer-panel__body .el-checkbox__label'
)
expect(labels.map((l) => l.text())).toMatchInlineSnapshot(`
[
"备选项 1",
"备选项 2",
"备选项 3",
"备选项 4",
"备选项 5",
"备选项 6",
"备选项 7",
"备选项 8",
"备选项 9",
"备选项 10",
"备选项 11",
"备选项 12",
"备选项 13",
"备选项 14",
"备选项 15",
]
`)
})
it('contents with multiple comment nodes', () => {
const wrapper = mount(Transfer, {
props: {
data: getTestData(),
},
slots: {
default: `
<!-- -->
1
<!-- -->
2
`,
},
})
const leftPanel = wrapper.find('.el-transfer-panel')
const labels = leftPanel.findAll(
'.el-transfer-panel__body .el-checkbox__label'
)
expect(labels.map((l) => l.text())).toMatchInlineSnapshot(`
[
"1 2",
"1 2",
"1 2",
"1 2",
"1 2",
"1 2",
"1 2",
"1 2",
"1 2",
"1 2",
"1 2",
"1 2",
"1 2",
"1 2",
"1 2",
]
`)
})
})
})

9
packages/components/transfer/src/transfer.vue
View File

@ -54,7 +54,7 @@
</template>
<script lang="ts" setup>
import { computed, h, reactive, ref, useSlots, watch } from 'vue'
import { Comment, computed, h, reactive, ref, useSlots, watch } from 'vue'
import { debugWarn, isEmpty, isUndefined } from '@element-plus/utils'
import { useLocale, useNamespace } from '@element-plus/hooks'
import { ElButton } from '@element-plus/components/button'
@ -145,7 +145,12 @@ watch(
const optionRender = computed(() => (option: TransferDataItem) => {
if (props.renderContent) return props.renderContent(h, option)
if (slots.default) return slots.default({ option })
const defaultSlotVNodes = (slots.default?.({ option }) || []).filter(
(node) => node.type !== Comment
)
if (defaultSlotVNodes.length) {
return defaultSlotVNodes
}
return h(
'span',