关于该组件化的一些个人理解，麻烦老师看下
来源：5-10 首页.UI组件-UiCascading（下）
粉墨登场
2020-12-25 17:35:13
# 具体遇到的问题
老师你好。视频中的多级联动菜单，思路是除了第一个select列表，其它列表的内容值根据上一级的select列表的值改变而改变。 因此如果不按从上到下的顺序依次选择select列表的option，select是没有选项的。因为上一个select列表的option值关系到请求下一个列表option值的具体参数。 而第一个列表的值默认是我们通过后台给我们的接口，再调用对象相应的方法获取到。（
// 默认给第一个select列表调用自定义事件函数reloadOptions
selects.eq(0).triggerHandler('reloadOptions');
）当每一个列表的option值改变时，将其后面的所有select列表全部清空。下一个列表的option值再根据上一个列表改变后的值而改变成相应的option。 所以给每个select添加change改变事件，当任意一个select改变时，先获取这个改变值的data-where属性（除了一个select列表没有data-where属性，其余三个都是上一个select的option再加data-where的值组成的），将字符串改为数组（第一个select的data-where属性默认为空，所以where的值事先经过了处理
where = where ? where.split(',') : [];
）再把改变过后的option值插入到这个数组的最后。并添加到下一个select标签的data-where属性。 也就是说下一个select标签的data-where属性是请求后台方法的具体参数：（依次是：地区、医院等级、具体医院名字和具体医院的科室。 所以
reloadOptions这个我们自定义的函数，调用方法时使用的apply，这就可以将参数以数组的形式传递了。 所以这也就是为什么上面的参数处理要用join和split来回转换的原因。 都是有原因的。一环扣一环。
）。而每个select标签的data-search属性值是请求后台给我们返回数据的方法名（函数名）。拿到数据后再使用each循环这些数据。并创建option标签，把值放进去。再append到相对应的select列表内。
请老师仔细看下，哪里的理解是有问题或偏差的。 谢谢老师。
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
2回答
-
同学你好，理解是对的，而且每一步的目的都了解的很清楚，很棒。这个项目是比较难理解的，所以需要用心的学，并尽全力理解每一步代码的意义。实际开发中，会遇到很多未知的代码，所以思考的过程很重要，而这个项目，就留了一些思考的空间。我觉得同学靠着老师的讲解以及自己的努力理解后，这个项目留在脑海中的印象会非常深刻，以后遇到这样的需求，会立马想起来这个项目的思路，从而将知识点运用到实际中。所以有时候，把所有的内容都讲的特别清楚也不是一件好事，听得越懂，思考的就越少，印象反而会不深刻。由于每个人的接受程度不一样，所以课程的深浅、详略程度并不好把握，而我们也在不断的思考怎么将课程做得更好（一直努力中）。为了防止同学听不懂，我们还设立了问答区，目的就是帮助每位同学学懂。我们会和同学一起进步，一起努力~
祝学习愉快！
0 -
粉墨登场
提问者
2020-12-25
对了，我还想再说一点：这并非是个人的炫耀或者显摆。绝大部分人都是普通人的智商，我也是。 第一遍我也看不太懂，不知道老师为什么要这么写。反复看了几遍之后再加上我自己写代码时的注释以及看data.js文件慢慢才理解了老师的写法。 这一部分组件整体性比较强，内在的代码逻辑性也比较强。 环环相扣，一环套一环。 我只是想再捋一遍整体的思路并且发给老师再验证一下对错。当然，其他同学如果静下心来仔细看我所说的思路，一定就明白了我所说的一环套一环。 因为视频中的老师并没有讲得这么细........
0
相似问题