<view class="row" v-for="item in columns" :key="item.key">
<view class="row-left" :class="{'ellipsis':item.ellipsis}">{{item.title}}</view>
<view class="row-right" :class="{'ellipsis':item.ellipsis}">
<slot name="bodyCell" :column="item" :record="data" :text="data[item.key]" :index="index">
<view :class="{'ellipsis':item.ellipsis}" v-if="item.customRender">{{item.customRender?.({value:data[item.key],record:data,index})}}</view>
<view :class="{'ellipsis':item.ellipsis}" v-else>{{data[item.key]}}</view>
</slot>
</view>
</view>
- 发布:2024-06-20 15:09
- 更新:2024-06-20 15:09
- 阅读:179
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows10
HBuilderX类型: 正式
HBuilderX版本号: 4.15
第三方开发者工具版本号: 1.6
基础库版本号: 3.45
项目创建方式: HBuilderX
示例代码:
操作步骤:
<view class="row" v-for="item in columns" :key="item.key"> <view class="row-left" :class="{'ellipsis':item.ellipsis}">{{item.title}}</view> <view class="row-right" :class="{'ellipsis':item.ellipsis}"> <slot name="bodyCell" :column="item" :record="data" :text="data[item.key]" :index="index"> <view :class="{'ellipsis':item.ellipsis}" v-if="item.customRender">{{item.customRender?.({value:data[item.key],record:data,index})}}</view> <view :class="{'ellipsis':item.ellipsis}" v-else>{{data[item.key]}}</view> </slot> </view> </view>
这是子组件代码 由父组件传入columns显示可以传入插槽这是父组件代码<baseTable v-bind="{dataSource,columns}" @click="handleItemClick">
<template #bodyCell="{column,record,text}">
<template v-if="['is_black','is_warning'].includes(column.key)">
<statusValid :status="text ? 1 : 0" />
</template>
</template>
</baseTable>
<view class="row" v-for="item in columns" :key="item.key"> <view class="row-left" :class="{'ellipsis':item.ellipsis}">{{item.title}}</view> <view class="row-right" :class="{'ellipsis':item.ellipsis}"> <slot name="bodyCell" :column="item" :record="data" :text="data[item.key]" :index="index"> <view :class="{'ellipsis':item.ellipsis}" v-if="item.customRender">{{item.customRender?.({value:data[item.key],record:data,index})}}</view> <view :class="{'ellipsis':item.ellipsis}" v-else>{{data[item.key]}}</view> </slot> </view> </view>
这是子组件代码 由父组件传入columns显示可以传入插槽这是父组件代码<baseTable v-bind="{dataSource,columns}" @click="handleItemClick">
<template #bodyCell="{column,record,text}">
<template v-if="['is_black','is_warning'].includes(column.key)">
<statusValid :status="text ? 1 : 0" />
</template>
</template>
</baseTable>
预期结果:
如果父组件不传染插槽可以显示默认内容
如果父组件不传染插槽可以显示默认内容
实际结果:
但是<slot name="bodyCell" :column="item" :record="data" :text="data[item.key]" :index="index">
<view :class="{'ellipsis':item.ellipsis}" v-if="item.customRender">{{item.customRender?.({value:data[item.key],record:data,index})}}</view>
<view :class="{'ellipsis':item.ellipsis}" v-else>{{data[item.key]}}</view>
</slot>这里他没有展示默认内容
但是<slot name="bodyCell" :column="item" :record="data" :text="data[item.key]" :index="index">
<view :class="{'ellipsis':item.ellipsis}" v-if="item.customRender">{{item.customRender?.({value:data[item.key],record:data,index})}}</view>
<view :class="{'ellipsis':item.ellipsis}" v-else>{{data[item.key]}}</view>
</slot>这里他没有展示默认内容
bug描述:
为什么插槽默认值在微信小程序中不显示出来 是不支持吗 H5可以正常显示 小程序没有显示可能认为我没有传入插槽