#uni-app是基于vue开发的所以代码写法都类似于vue的...........................................................

 

下面进入正题:怎么实现二级联动的筛选列表?

首先第一步是定义两个集合:leftArray[], rightArray[] . allArray[] 一个是左边的列表数组,一个是右边二级列表的数组,一个是总数组

我的第一个为左边数组,第二个为总数组,第三个为右边的数据数组;   (一下左侧数据统称为父数组,右边的统称为子数组.........)

首先获取字典数据:

这是数组赋值的js获取到数据后,for遍历获取左侧数据,设定默认选中父数组的第一条信息,并给第一条信息赋值this.classArray = this.SearchList[0].value;

父数组已经填充,默认选中第一条,接下来就是为父组件设置点击监听事件,

记得要把下标传过去.

点击每个父组件,给设置样式,样式代码在这里我就不贴了,不懂私我;

在这里我的SearchList是总数组,根据下标从总数组取数据赋给子数组也是和父数组对应的数据,并声明一个变量为'P_Index'

那么这个'P_Index'在这里什么用呢?

1,是在父组件中做样式选择:比如,

代码没有全,不过应该能看出是一个三元运算符判断样式的选择!

 

最后是子数组选中状态,以及返回特定的json串,方便传给后台:

C_Index在这里基本上是没用到的,所以不用管它就好了,这就是大部分代码的逻辑了,多选已经实现,单选,重置还没做,在这里记录一下,如果有要学习的可以一起交流!