uni-app Slot 无法使用默认值

uni-app Slot 无法使用默认值

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.4

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：vivo

手机机型：vivox21

页面类型：vue

打包方式：云端

操作步骤： 1

预期结果： 1

实际结果： 1

bug描述： APP 插槽内使用 v-if 和 v-else-if v-else-if 条件总不成立，但是同样的代码 H5端正常。

<s-table :border="true" :columns="columns" :list="list" style="font-size: 12px;">
    <template #default="{column,row}">
        <view v-if="column.key == 'Profit'" style="font-weight: bold;">
            999
        </view>
        <view v-else-if="column.key == 'Index'">
            666
        </view>
    </template>
</s-table>

并且多次使用 v-if组件 H5和app都会导致无法使用默认值。

<s-table :border="true" :columns="columns" :list="list" style="font-size: 12px;">
    <template #default="{column,row}">
        <view v-if="column.key == 'Profit'" style="font-weight: bold;">
            999
        </view>
        <view v-if="column.key == 'Index'">
            666
        </view>
    </template>
</s-table>

更多关于uni-app Slot 无法使用默认值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app Slot 无法使用默认值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，插槽内使用 v-if 和 v-else-if 在 App 端出现条件判断失效的问题，可能是由于平台差异导致的渲染机制不同。从你的代码看，H5 正常而 App 异常，建议检查以下几点：

  1. 数据绑定问题：确保 column.key 的值在 App 端与 H5 端一致。可以通过 console.log 输出 column.key 来验证实际值。

  2. 条件渲染优化：尝试将多个 v-if 改为 v-if/v-else 链，避免独立条件可能引发的渲染冲突。例如：

    <view v-if="column.key === 'Profit'">999</view>
<view v-else-if="column.key === 'Index'">666</view>
<view v-else>{{ row[column.key] }}</view>
回到顶部