Skip to content

Vue3微信小程序v-for动态绑定插槽解析问题 #5269

Closed
@c-sopoo

Description

@c-sopoo

组件模板:

<template v-for="(col, i) in columns" :key="col.prop">
      <view
        class="table-body-cell cell"
        :class="[`cell-fixed-${col.fixed}`]"
        :style="{ width: col.width, textAlign: col.align }"
      >
        <view class="cell-wrapper">
          <view class="cell-content stock-item-content f32" :class="col.prop">
            <!-- 自定义插槽 -->
            <template v-if="col.slot && $slots[col.slot]">
              <slot :name="col.slot" :data="dataItem"></slot>
            </template>
            <template v-else>
              <view>2</view>
......

image

使用组件:

<template v-for="item in stocks[currentTabItem.id]" :key="item.code">
        <stock-table-row  :dataItem="item">
          <template #name="{ data }">
            <view class="stock-name flex y">
              123
              <view>{{ data.name }}</view>
            </view>
          </template>
          <template #chart="{ data }">
            <view class="stock-name flex y">
              <view>{{ data.code }}</view>
            </view>
          </template>
......

image

微信小程序解析:
image
image

HBuilderX 4.36

可以看到,解析后的插槽名变了,如何能正确渲染?

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions