vue 列表单元格切换展开/折叠,点击同一个展开/折叠

前言

iOS/Andirod原生应用 会有一个组件TableView或Recyclerview  他们中的每个单元格即为一个列表控件下的子控件，每个控件对应一个地址和与之关联的指针和指向地址的索引，可以通过索引找到地址，找到控件改变控件的状态，操作控件方法去做相应的业务逻辑，例如控件的背景色改变，文字颜色等等属性变化 。

废话少说，正题；

图1

如图1所示：

点击不同的单元格，展开对应点击的单元格下的子级列表，关闭上一次被点击单元格的子级列表。

图2

如图2所示

点击同一个单元格，会根据上一次展开/关闭的状态，相应的去展开或关闭

具体思路:

(1)首先先实现不同单元格之间的切换展开/折叠 根据 for循序遍历标签时, 用一个全局点击的索引变量，去监听获取被点击单元格的索引，然后与当前遍历的标签索引进行比较判断，相等时则展开子单元格数据，反之折叠。

index为for循环索引，serverClickIndex为单元格点击获取索引

(2)重复点击同一个单元格展开/折叠，需要知道当前点击的单元格的展开与折叠状态，然后对状态的布尔变量取反即可,  这里就会遇到我之前提到过的 原生与前端的不同，原生控件可以有地址索引去找， 前端标签可以通过，数据去存储状态，改变状态 。      我们可以在请求接口，获取数据时，对数组的每一个元素增加一个status属性

默认都是折叠状态

点击展开/折叠时，需要将上一次的展开折叠的记录设置为 false ，以满足取消不同单元格与相同单元格之间切换展开/折叠状态。 只对当前的单元格点击状态进行改变。

更新状态

完整代码：

通过数据数组元素添加对象status属性状态+点击改变状态实现该功能

以上为开发思路，可根据实际情况自定义组局

完整组件可使用vant折叠面板https://youzan.github.io/vant/v2/#/zh-CN/collapse