vue级联选择器

发布于 2022-09-05 22:16:19 字数 429 浏览 12 评论 0

用vue做了个级联选择器,到设置默认值的这一步时,没有什么想法,就参看了vux picker组件的方法,
默认值传的一个代表层级关系的数组, 比如[1,2,3],3是2的子,2是1的子,

但是大多数情况是 只知道最底层的id 3,然后就有点不知道咋实现了,

想请教下大家!谢谢!

这是我的源码,功能是实现的了,就差设置默认值这一步了
vue 级联选择器


分割线
刚刚发现上面的版本有个bug, 当存在三级时 直接去改变1级,第三级还存在,现在加了个nextTick改了之后的版本:
vue 级联选择器2.0

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

月朦胧 2022-09-12 22:16:19

你的数据结构建议改一下如下

let data = [
{ id: 1,name: 'a',
    child: [
        {id: 3,name: 'a-1',
            child: [
                {id: 7,name: 'a-1-1'}
            ]
        }
        {id: 4,name: 'a-2'}
    ]
}, 
{id: 2,name: 'b',
    child: [
        {id: 5,name: 'b-1'}
        {id: 6,name: 'b-2'}
    ]
}, 
{id: 8,name: 'c'}
];

写了个demo你可以参考下
https://jsfiddle.net/zwwill/g5o0obpu/

夏日落 2022-09-12 22:16:19

递归查找pid,一直到pid=0,然后把这些拼成一个数组就好了。

比如一开始id是3,然后pid是2,那就再找id是2的,看id是不是0不是继续往上找,同时用一个数组记录下来每个节点。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文