邦德
邦德
  • 发布:2021-05-06 17:44
  • 更新:2021-05-06 17:44
  • 阅读:741

微信小程序自定义组件中有多个同名插槽,引用组件自定义内容只会填充第一个插槽

分类:uni-app

uniapp开发微信小程序,自己封装一个最基本简单的table组件,是仿照antd-vue的样子,其中一个功能是columns配置表格列中可以自定义内容,也就是插槽

<template> <view class="s-table"> <view class="table-th flex"> <view class="td td1 flex align_c justify_c flex-1" v-for="(item, index) in tabColumns" style="{ 'width': item.width+'px', 'text-align': item.align }">{{item.name}}</view> </view>
<view class="table-tb">
<view :class="[{ 'Interlaced': Interlaced }]" class="table-row flex" v-for="row in dataSource">
<view class="td td1 flex align_c justify_c flex-1" v-for="(item, index) in tabColumns" style="{ 'text-align': item.align }"> <!-- 表头配置项没有设置自定义插槽,使用 text -->
<template v-if="!item.scopedSlots.customRender">
<text>{{ row[index] }}</text>
</template>
<!-- 表头配置项设置了自定义插槽 -->
<template v-else>
<!-- v-slot不支持动态插槽名,用微信小程序原生的写法 -->
<!-- #ifdef MP-WEIXIN -->
<slot name="{{ item.scopedSlots.customRender }}"></slot>
<!-- #endif -->
</template>
</view>
</view>
</view>
</view>
</template>

由于是循环的row,这样所有插槽都是同名的,当父组件中引用该子组件时,传入插槽的内容只会填充第一个插槽,但是查阅资料知道,vue中给多个同名插槽传内容都会填充,这会不会因为微信小程序不支持多个同名插槽同时填充内容?

<s-table :columns="columns" :data="data" :Interlaced="true">
<template v-slot:action>
<uni-icons type="search" size="13" color="#666"></uni-icons><text>查看</text>
</template>
</s-table>
columns: [{
dataIndex: 'partsName',
name: '配件名称',
width: '165',
height: '90',
align: 'center',
},
{
dataIndex: 'brand',
name: '品牌',
width: '288',
height: '90',
align: 'center'
},
{
dataIndex: 'action',
name: '数据查看',
width: '178',
height: '90',
align: 'center',
scopedSlots: {
customRender: 'action'
}
},
],

2021-05-06 17:44 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复