uni-app中uni-data-picker设计存在严重缺陷
uni-app中uni-data-picker设计存在严重缺陷
信息类型 | 详细信息 |
---|---|
产品分类 | uniapp/H5 |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | win10 |
浏览器平台 | Chrome |
浏览器版本 | 113 |
项目创建方式 | CLI |
CLI版本号 | 3.0.0-alpha-308032023052300 |
操作步骤:
见正文
预期结果:
年级的层级应该只显示年级
实际结果:
年级的层级显示了年级和班级, 只因为他们的value是一样的.但这明显是有问题的. 他们的层级不一样, 不应该用value来匹配
bug描述:
template:
<uni-data-picker
:localdata="fieldChoices"
@change="onPickerConfirm"
>
</uni-data-picker>
script:
const fieldChoices = [
{
value: 1,
text: "西城小学",
children: [
{
value: 6,
text: "6年级",
children: [
{ value: 33, text: "4班" },
{ value: 32, text: "3班" },
{ value: 31, text: "2班" },
{ value: 30, text: "1班" },
],
},
{
value: 5,
text: "5年级",
children: [
{ value: 29, text: "5班" },
{ value: 28, text: "4班" },
{ value: 27, text: "3班" },
{ value: 26, text: "2班" },
{ value: 25, text: "1班" },
],
},
{
value: 4,
text: "4年级",
children: [
{ value: 24, text: "6班" },
{ value: 23, text: "5班" },
{ value: 22, text: "4班" },
{ value: 21, text: "3班" },
{ value: 20, text: "2班" },
{ value: 19, text: "1班" },
],
},
{
value: 3,
text: "3年级",
children: [
{ value: 18, text: "6班" },
{ value: 17, text: "5班" },
{ value: 16, text: "4班" },
{ value: 15, text: "3班" },
{ value: 14, text: "2班" },
{ value: 13, text: "1班" },
],
},
{
value: 2,
text: "2年级",
children: [
{ value: 12, text: "6班" },
{ value: 11, text: "5班" },
{ value: 10, text: "4班" },
{ value: 9, text: "3班" },
{ value: 8, text: "2班" },
{ value: 7, text: "1班" },
],
},
{
value: 1,
text: "1年级",
children: [
{ value: 6, text: "6班" },
{ value: 5, text: "5班" },
{ value: 4, text: "4班" },
{ value: 3, text: "3班" },
{ value: 2, text: "2班" },
{ value: 1, text: "1班" },
],
},
],
},
];
实际渲染结果截图:
3 回复
不至于是设计的严重缺陷 一般的tree类型数据 都是通过父级id向上查找来实现逻辑处理的
而你这个value存在相等的情况 所以导致组件内部的父级数据查找时出现了错乱
你这种需求只能通过索引实现级联的选择效果 而官方组件是通过父级id实现的 所以不满足你的需求
你可自己实现一个适和自己的级联组件 或者 在插件市场中寻找与你需求相似的组件
即将发布支持 uni-app-x 版本的 uni-data-picker
之前的版本是为了适应 uniCloud 数据, 优化查找速度,摊平了数据结构
新版本已改进实现,不在依赖 value 属性
uni-app-x的文档没有扩展组件版块