美文网首页
vue 列表单元格切换展开/折叠,点击同一个展开/折叠

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

作者: 全栈农民工 | 来源:发表于2022-07-14 19:32 被阅读0次

前言

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

相关文章

  • 折叠展开

    早上阅读了最近很火的《北京折叠》,文章不长,很快读完,中间有很多的描写还是跳过的,因为不是精读,因此很多细节并不清...

  • jQuery 树插件-zTree 全选 反选 折叠和展开,实现联

    1:点击全选可选中或取消选中全部节点,全部展开可展开或折叠所有节点 2:单个节点的选中或折叠等操作会影响全选和展开...

  • Flutter代码的一些快捷键

    折叠部分代码: ⌘ + -展开部分代码: ⌘ + +折叠全部代码: ⌘ + ⇧ + -展开全部代码: ⌘ + ⇧ ...

  • spacemacs常用操作

    折叠 zc 折叠当前块(函数)zm 折叠当前文件的所有函数zo 展开当前折叠zr 展开当前文件的所有折叠 函数跳转...

  • Vue 实现展开折叠效果

    使用插件 页面需要引入这个js 页面使用: js 另外一种简单的 html js style

  • VIM使用技巧

    ★在vim的命令模式 按Shift+F5,可进入帮助文档。 ★展开折叠 展开、折叠所有代码 z + i 折叠代码 ...

  • React Table组件的expandedRowRender展

    需求:可以展开/折叠的效果的列表image.pngimage.png 问题 展开id为2的的行时,发现const ...

  • 展开与折叠

    经过动手操作,我发现如下情况: 一、附页图1中长方体的1和6面相对,2和4面相对,3和5面相对;正方体的1和5...

  • 展开与折叠

  • 展开与折叠

    今天,我们用数学书上给的展开图,做了长方体和正方体,有些展开雨可以做成长方体或正方体,有些则不行。 那是因为有些的...

网友评论

      本文标题:vue 列表单元格切换展开/折叠,点击同一个展开/折叠

      本文链接:https://www.haomeiwen.com/subject/lzjcirtx.html