uni-app整合uview-plus不停提示More than one slot named "cell-0" are found问题
uni-app整合uview-plus不停提示More than one slot named “cell-0” are found问题
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 11 家庭中文版 | HBuilderX |
产品分类：uniapp/小程序/微信
示例代码：
<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([
{
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>
操作步骤：
- 创建项目
- 使用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" } }
更多关于uni-app整合uview-plus不停提示More than one slot named "cell-0" are found问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
该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 生成，仅供参考
更多关于uni-app整合uview-plus不停提示More than one slot named "cell-0" are found问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
