6***@qq.com
6***@qq.com
  • 发布:2025-12-31 10:19
  • 更新:2025-12-31 10:20
  • 阅读:11

【报Bug】uni-app整合uview-plus不停提示More than one slot named "cell-0" are found问题

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11 家庭中文版

HBuilderX类型: 正式

HBuilderX版本号: 4.87

第三方开发者工具版本号: stable 1.06.2504060

基础库版本号: 3.13.0

项目创建方式: HBuilderX

示例代码:

<template>
<view class="container">
<!-- 顶部操作栏 -->
<view>
<up-row gutter="5">
<up-col span="3">
<up-button type="success" text="新增" shape="circle" @click="handleAdd" ></up-button>
</up-col>
<up-col span="3">
<up-button type="warning" text="修改" shape="circle" @click="handleEdit" ></up-button>
</up-col>
<up-col span="3">
<up-button type="error" text="删除" shape="circle" @click="handleDelete" ></up-button>
</up-col>
</up-row>
</view>
<view>
<u-table2 :data="tableData" :columns="columns" stripe border @row-click="handleRowClick"/>
</view>
</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

const RowId = ref('')
const selectedRow = ref(null)

const tableData = ref([])

const columns = ref([
// {
// type: 'selection', width: '30px',
// },
{
title: 'ID',
key: 'id',
width: '80',
align: 'center'
},
{
title: '姓名',
key: 'name',
align: 'center'
},
{
title: '年龄',
key: 'age',
align: 'center'
},
{
title: '性别',
key: 'gender',
align: 'center'
},
{
title: '联系电话',
key: 'phone',
align: 'center'
}
])

const handleRowClick = (row, index) => {
selectedRow.value = row
console.log('选中行:', row, '索引:', index)
}

const handleConfirm = () => {
uni.showToast({
title: '操作成功',
icon: 'success'
})
}

const handleEdit = () => {
if (!selectedRow.value) {
uni.showToast({
title: '请先选择一行数据',
icon: 'none'
})
return
}
console.log('编辑:', selectedRow.value)
}

const handleDelete = () => {
if (!selectedRow.value) {
uni.showToast({
title: '请先选择一行数据',
icon: 'none'
})
return
}
uni.showModal({
title: '确认删除',
content: 确定要删除 ${selectedRow.value.name} 吗?,
success: (res) => {
if (res.confirm) {
// 执行删除逻辑
console.log('删除:', selectedRow.value)
}
}
})
}

const handleAdd = () => {
console.log('新增数据')
}

onMounted(() => {
tableData.value = [
{ id: 1, name: '张三', age: 25, gender: '男', phone: '13800138000' },
{ id: 2, name: '李四', age: 30, gender: '女', phone: '13900139000' },
{ id: 3, name: '王五', age: 28, gender: '男', phone: '13700137000' },
{ id: 4, name: '赵六', age: 32, gender: '女', phone: '13600136000' }
]
})

</script>

<style lang="scss" scoped>
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 20rpx;
box-sizing: border-box;
}

</style>

操作步骤:

1:创建项目

使用HbuilderX新建 --- 创建项目 ---- uni-app --- 默认模版,vue版本3.0

项目整合

npm install uview-plus

在uni.scss中引入样式,uni.scss在工程的根目录,不在src目录下

@import 'uview-plus/theme.scss';

在app.vue文件中引入样式

<style lang="scss">  
    /*每个页面公共css */  
    @import "uview-plus/index.scss";  
</style>

在page.json中配置easycom

"easycom": {  
        "autoscan": true,  
        // 注意一定要放在custom里,否则无效,https://ask.dcloud.net.cn/question/131175  
        "custom": {  
            "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",  
            "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",  
            "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"  
        }  
    }

代码如下:

<template>  
    <view class="container">  
        <!-- 顶部操作栏 -->  
        <view>  
            <up-row gutter="5">  
                <up-col span="3">  
                    <up-button type="success" text="新增" shape="circle" @click="handleAdd" ></up-button>  
                </up-col>  
                <up-col span="3">  
                    <up-button type="warning" text="修改" shape="circle" @click="handleEdit" ></up-button>  
                </up-col>  
                <up-col span="3">  
                    <up-button type="error" text="删除" shape="circle" @click="handleDelete" ></up-button>  
                </up-col>  
            </up-row>  
        </view>  
        <view>  
            <u-table2 :data="tableData" :columns="columns" stripe border @row-click="handleRowClick"/>  
        </view>  
    </view>  
</template>  

<script setup>  
import { ref, reactive, onMounted } from 'vue'  
import { onShow, onHide } from '@dcloudio/uni-app'  

const RowId = ref('')  
const selectedRow = ref(null)  

const tableData = ref([  
{ id: 1, name: '张三', age: 25, gender: '男', phone: '13800138000' },  
        { id: 2, name: '李四', age: 30, gender: '女', phone: '13900139000' },  
        { id: 3, name: '王五', age: 28, gender: '男', phone: '13700137000' },  
        { id: 4, name: '赵六', age: 32, gender: '女', phone: '13600136000' }  
])  

const columns = ref([  
    // {   
    //  type: 'selection', width: '30px',  
    // },  
    {   
        title: 'ID',   
        key: 'id',   
        width: '80',  
        align: 'center'  
    },  
    {   
        title: '姓名',   
        key: 'name',   
        align: 'center'  
    },  
    {   
        title: '年龄',   
        key: 'age',   
        align: 'center'  
    },  
    {   
        title: '性别',   
        key: 'gender',   
        align: 'center'  
    },  
    {   
        title: '联系电话',   
        key: 'phone',  
        align: 'center'  
    }  
])  

const handleRowClick = (row, index) => {  
    selectedRow.value = row  
    console.log('选中行:', row, '索引:', index)  
}  

const handleConfirm = () => {  
    uni.showToast({  
        title: '操作成功',  
        icon: 'success'  
    })  
}  

const handleEdit = () => {  
    if (!selectedRow.value) {  
        uni.showToast({  
            title: '请先选择一行数据',  
            icon: 'none'  
        })  
        return  
    }  
    console.log('编辑:', selectedRow.value)  
}  

const handleDelete = () => {  
    if (!selectedRow.value) {  
        uni.showToast({  
            title: '请先选择一行数据',  
            icon: 'none'  
        })  
        return  
    }  
    uni.showModal({  
        title: '确认删除',  
        content: `确定要删除 ${selectedRow.value.name} 吗?`,  
        success: (res) => {  
            if (res.confirm) {  
                // 执行删除逻辑  
                console.log('删除:', selectedRow.value)  
            }  
        }  
    })  
}  

const handleAdd = () => {  
    console.log('新增数据')  
}  

</script>  

<style lang="scss" scoped>  
.container {  
    display: flex;  
    flex-direction: column;  
    min-height: 100vh;  
    padding: 20rpx;  
    box-sizing: border-box;  
}  
</style>

预期结果:

预期结果应该正常运行,显示表格数据。

实际结果:

显示表格数据,但不显示数据,并且不断的提示09:34:09.446 [Component] More than one slot named "cell-0" are found inside a single component instance (in component "node-modules/uview-plus/components/u-table2/u-table2"). The first one was accepted.

bug描述:

09:34:09.446 [Component] More than one slot named "cell-0" are found inside a single component instance (in component "node-modules/uview-plus/components/u-table2/u-table2"). The first one was accepted.
09:34:09.446 [Component] More than one slot named "cell-1" are found inside a single component instance (in component "node-modules/uview-plus/components/u-table2/u-table2"). The first one was accepted.
09:34:09.446 [Component] More than one slot named "cell-1" are found inside a single component instance (in component "node-modules/uview-plus/components/u-table2/u-table2"). The first one was accepted.
09:34:09.446 [Component] More than one slot named "cell-1" are found inside a single component instance (in component "node-modules/uview-plus/components/u-table2/u-table2"). The first one was accepted.
不停的出现这个提示,我只截取了一部分。
说明:uni-app使用vue3语法,整合uview-plus。uview-plus的版本是3.6.29

2025-12-31 10:19 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

该bug反馈内容完整,描述清晰,包含标题、详细问题描述、可运行代码示例、复现步骤、预期与实际结果及环境信息,官方人员可据此复现问题。错误日志显示u-table2组件内部存在多个同名插槽(cell-0/cell-1),这是Vue框架的警告机制触发的,表明组件实现存在问题。

经分析,此问题不属于uni-app核心框架bug,而是uview-plus第三方库的实现问题。知识库中无直接相关修复记录,但根据Vue插槽机制规范,单个组件实例内不应存在同名插槽。用户使用的uview-plus 3.6.29版本可能存在表格组件实现缺陷,导致动态生成列时重复创建同名插槽。

建议用户:1) 检查uview-plus最新版本是否已修复此问题;2) 确认是否误用了表格插槽功能(代码中未显式使用插槽但组件内部可能异常触发);3) 参考uview-plus表格文档进行配置验证;4) 若问题持续,建议向uview-plus官方提交issue并附上此错误日志。该警告虽影响体验但通常不影响功能,表格数据不显示可能另有原因,需检查columns配置与数据字段匹配性。

内容为 AI 生成,仅供参考

要回复问题请先登录注册