test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 20:27:44 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(components): [tree] default slots not displayed (#14939)

Browse Source 
* fix(components): [tree] default slots not displayed

* test: add customize some node contents
This commit is contained in:
一只前端汪 2023-11-27 16:33:35 +08:00 committed by GitHub
parent 9f1ffc06cb
commit 23201e2f4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
packages/components/tree/__tests__/tree.test.ts
View File

@ -1521,4 +1521,66 @@ describe('Tree.vue', () => {
)
expect(flag).toBe(false)
})
test('customize some node contents', async () => {
const wrapper = mount({
template: `
<el-tree :data="data">
<template #default="{ data }">
<div v-if="data.id === '1'">
customize: {{ data.label }}
</div>
</template>
</el-tree>
`,
components: {
'el-tree': Tree,
},
data() {
return {
data: [
{
id: '1',
label: 'Level one 1',
children: [
{
id: '1-1',
label: 'Level two 1-1',
children: [
{
label: 'Level three 1-1-1',
},
],
},
],
},
{
id: '2',
label: 'Level one 2',
children: [
{
id: '2-1',
label: 'Level two 2-1',
children: [
{
label: 'Level three 2-1-1',
},
],
},
],
},
],
}
},
})
const nodeContentWrapper1 = wrapper.findAll('.el-tree-node__content')[0]
const nodeContentWrapper2 = wrapper.findAll('.el-tree-node__content')[1]
const nodeLabelWrapper1 = nodeContentWrapper1.find('div')
const nodeLabelWrapper2 = nodeContentWrapper2.find(
'span.el-tree-node__label'
)
expect(nodeLabelWrapper1.text()).toEqual('customize: Level one 1')
expect(nodeLabelWrapper2.text()).toEqual('Level one 2')
})
})

8
packages/components/tree/src/tree-node-content.vue
View File

@ -1,6 +1,6 @@
<script lang="ts">
// @ts-nocheck
import { defineComponent, h, inject } from 'vue'
import { defineComponent, h, inject, renderSlot } from 'vue'
import { useNamespace } from '@element-plus/hooks'
import type { ComponentInternalInstance } from 'vue'
@ -24,9 +24,9 @@ export default defineComponent({
const { data, store } = node
return props.renderContent
? props.renderContent(h, { _self: nodeInstance, node, data, store })
: tree.ctx.slots.default
? tree.ctx.slots.default({ node, data })
: h('span', { class: ns.be('node', 'label') }, [node.label])
: renderSlot(tree.ctx.slots, 'default', { node, data }, () => [
h('span', { class: ns.be('node', 'label') }, [node.label]),
])
}
},
})