uni-app中怎么实现二级列表切换,以及二级列表的多条选中和取消,重置数据等...
#uni-app是基于vue开发的所以代码写法都类似于vue的...........................................................
下面进入正题:怎么实现二级联动的筛选列表?
首先第一步是定义两个集合:leftArray[], rightArray[] . allArray[] 一个是左边的列表数组,一个是右边二级列表的数组,一个是总数组
我的第一个为左边数组,第二个为总数组,第三个为右边的数据数组; (一下左侧数据统称为父数组,右边的统称为子数组.........)
首先获取字典数据:
这是数组赋值的js获取到数据后,for遍历获取左侧数据,设定默认选中父数组的第一条信息,并给第一条信息赋值this.classArray = this.SearchList[0].value;
父数组已经填充,默认选中第一条,接下来就是为父组件设置点击监听事件,
记得要把下标传过去.
点击每个父组件,给设置样式,样式代码在这里我就不贴了,不懂私我;
在这里我的SearchList是总数组,根据下标从总数组取数据赋给子数组也是和父数组对应的数据,并声明一个变量为'P_Index'
那么这个'P_Index'在这里什么用呢?
1,是在父组件中做样式选择:比如,
代码没有全,不过应该能看出是一个三元运算符判断样式的选择!
最后是子数组选中状态,以及返回特定的json串,方便传给后台:
C_Index在这里基本上是没用到的,所以不用管它就好了,这就是大部分代码的逻辑了,多选已经实现,单选,重置还没做,在这里记录一下,如果有要学习的可以一起交流!