插槽在两个table组件中都渲染(其中一个未接受插槽) #7786
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
4.2.3
Environment
vue3
Reproduction link
https://3x.antdv.com/components/table-cn
Steps to reproduce
二次封装了一个table组件A，在其中重新生成了columns，加入了customRender属性作为自定义渲染。
组件A:
function setDefaultColumnWidth(columns){
return columns
.map((item) => {
if (item.children) item.children = setDefaultColumnWidth(item.children)
item.width = item.width ? item.width : item.minWidth ? undefined : 100
item.customRender = ({ text, record, column, index }) => {
const slotNames = Object.keys(slots)
if (props.shouldRenderSlots && slotNames.includes(column.dataIndex)) {
return slots[column.dataIndex]({ record, column, index })
}
const label = getLabelText(column, text, record)
if (item.ellipsis === false) {
return <span>{label}</span>
}
const events: any = {}
Object.keys(column.events || {}).forEach((eventName) => {
events[eventName] = (e) => {
column.events[eventName](e, record, column, index)
}
})
return (
<span
class={label === '--' ? undefined : 'ellipsis-span'}
{...events}
onMouseenter={mouseEnterHandler}
onMouseleave={mouseLeaveHandler}>
{label}
</span>
)
}
item.customHeaderCell = (column) => {
const { required, tip } = column
let className = 'ant-table-cell'
const isRequired = isFunction(required) ? required() : required ?? false
if (isRequired) className = 'requiredHeadCell'
if (tip) className = 'tipHeadCell'
return {
class: className, // required ? 'requiredHeadCell' : 'ant-table-cell'
tip
}
}
return item as CustomTableColumnsType[number]
})
}
然后组件B中使用了两个table组件A，其中A1作为表头相对页面吸附固定不接收插槽，A2作为表体渲染数据接收插槽。
组件B:
<div
class="sticky-header-table-container"
:id="domKey"
:class="{ tableLayoutAuto: $attrs.tableLayout === 'auto', isDialog: isDialog }">
<div class="sticky-table-header" :style="{ top: stickyOffsetTop }" ref="stickyHeaderElRef">
<GenerateTable
v-bind="$attrs"
:columns="tableHeaderColumns"
:dataSource="dataSource"
:shouldRenderSlots="false"
key="sticky-header-table-header-render"
tableName="sticky-header-table-header-render"
@resizeColumn="throttleTHeaderResize"></GenerateTable>
</div>
<div class="sticky-table-body" ref="tableContentElRef">
<GenerateTable
v-bind="$attrs"
:columns="tableBodyColumns"
:dataSource="dataSource"
key="sticky-header-table-content-render"
tableName="sticky-header-table-content-render">
<template v-for="(_value, name) in $slots" #[name]="data">
<slot :name="name" v-bind="data"></slot>
</template>
</GenerateTable>
</div>
</div>
父组件中使用组件B，并传入对应列的插槽。但结果是两个table都同时渲染了插槽内容
<StickyHeaderTable
:columns="columns"
:loading="goalLoading"
tableEllipsis
:data-source="formData.goals"
:actions="tableActions"
:container-style="{ padding: 0 }">
<template #completionTime="{ record }">
{{ getCompletionDate(record) }}
</template>
<template #goalAnnexId="{ record }">
<HrUpload
v-if="record.goalAnnexId"
:file-list="record?.fileList"
is-preview
size="small"
@preview="previewHandler"></HrUpload>
<span v-else>--</span>
</template>
<template #selfAssessmentGrade="{ record }">
{{ getProbationGradeText(record.selfAssessmentGrade) || '--' }}
</template>
<template #superiorEvaluationGrade="{ record, index }">
<a-form-item
v-if="isHandler && details.node === LEADER_APPRAISAL"
:name="['goals', index, 'superiorEvaluationGrade']"
:rules="[{ required: true, message: '', type: 'number' }]">
<a-select
v-model:value="record.superiorEvaluationGrade"
size="small"
placeholder="请选择"
:options="probationGradeOptions"
@change="blurChange(record, 'superiorEvaluationGrade')" />
</a-form-item>
<span v-else>{{ getProbationGradeText(record.superiorEvaluationGrade) }}</span>
</template>
<template #superiorEvaluationDesc="{ record, index }">
<a-form-item
v-if="isHandler && details.node === LEADER_APPRAISAL"
:name="['goals', index, 'superiorEvaluationDesc']"
:rules="[{ required: true, message: '' }]">
<HrTextArea
v-model:value="record.superiorEvaluationDesc"
size="small"
placeholder="请输入完成情况描述"
:maxlength="1000"
:auto-size="{ minRows: 2 }"
@blur="blurChange(record, 'superiorEvaluationDesc')" />
</a-form-item>
<span v-else>{{ record.superiorEvaluationDesc || '--' }}</span>
</template>
<template #inviteNum="{ record }">
<a href="javascript:;" @click="addInvite(record, false)">
{{ `邀评${record.inviteNum || 0}人,已反馈${record.feedbackNum || 0}人` }}
</a>
</template>
<template #actions="{ record }">
<HrTableActions :data="record" :btns="tableActions"></HrTableActions>
</template>
</StickyHeaderTable>
What is expected?
只有接收了插槽的表格渲染对应的插槽
What is actually happening?
结果是两个table都同时渲染了插槽内容