mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-04-12 16:40:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [table-v2] cell and header-cell slots parmas (#9665)

Browse Source 
* fix(components): [table-v2] cell and header-cell slots parmas

* fix(components): [table-v2] add slots scope test
This commit is contained in:
Xc 2022-09-07 21:50:05 +08:00 committed by GitHub
parent 0fbbc65781
commit e008e92ce7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
packages/components/table-v2/__tests__/table-v2.test.tsx
View File

@ -2,6 +2,10 @@ import { ref } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, test } from 'vitest'
import TableV2 from '../src/table-v2'
import type {
TableV2HeaderRowCellRendererParams,
TableV2RowCellRenderParam,
} from '../src/components'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
@ -72,4 +76,60 @@ describe('TableV2.vue', () => {
expect(cell.exists()).toBe(true)
expect(cell.find('span').text()).toBe(customText)
})
test('slots cell scope', async () => {
const columns = ref(generateColumns(10))
const data = ref(generateData(columns.value, 20))
const customText = 'custom cell'
const wrapper = mount(() => (
<TableV2
columns={columns.value}
data={data.value}
width={700}
height={400}
v-slots={{
cell: (scope: TableV2RowCellRenderParam) => (
<span>
{scope.rowData[scope.column.dataKey!]}
{customText}
</span>
),
}}
/>
))
expect(wrapper.find('.el-table-v2').exists()).toBe(true)
const cell = wrapper.find('.el-table-v2__row-cell')
expect(cell.exists()).toBe(true)
expect(cell.find('span').text()).toBe(
`${data.value[0][columns.value[0].dataKey]}${customText}`
)
})
test('slots header-cell scope', async () => {
const columns = ref(generateColumns(10))
const data = ref(generateData(columns.value, 20))
const customText = 'header'
const wrapper = mount(() => (
<TableV2
columns={columns.value}
data={data.value}
width={700}
height={400}
v-slots={{
'header-cell': (scope: TableV2HeaderRowCellRendererParams) => (
<span>
{scope.column.title}
{customText}
</span>
),
}}
/>
))
expect(wrapper.find('.el-table-v2').exists()).toBe(true)
const cell = wrapper.find('.el-table-v2__header-cell')
expect(cell.exists()).toBe(true)
expect(cell.find('span').text()).toBe(
`${columns.value[0].title}${customText}`
)
})
})

4
packages/components/table-v2/src/table-v2.tsx
View File

@ -270,7 +270,7 @@ const TableV2 = defineComponent({
{...tableCellProps}
style={_columnsStyles[props.column.key]}
>
{slots.cell()}
{slots.cell(props)}
</Cell>
) : (
<Cell
@ -293,7 +293,7 @@ const TableV2 = defineComponent({
{...tableHeaderCellProps}
style={_columnsStyles[props.column.key]}
>
{slots['header-cell']()}
{slots['header-cell'](props)}
</HeaderCell>
) : (
<HeaderCell