插槽在两个table组件中都渲染(其中一个未接受插槽)

[TurbMZ]

trafficstars

• [ ] 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都同时渲染了插槽内容

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.