vue 实现折叠面板

效果图

思路

其实说是折叠效果，关键是数据的处理，
1：第一行开头有全部，结束有更多。所以第一行显示的只有三条数据
2：每行显示固定的条数，五条
3：最后一行显示三条
4：布局第一行是展示的，下面是通过更多的折叠逻辑来实现的

代码实现

首先是截取数据的前三个，slice [0,3)
其次是截取后面所有的数据 slice [3, data.list.length)
最后是分组，五个一组

谈一个额外话题，要求是没有匹配到的数据，显示灰色，且不可点击状态
这还不好实现吗？ 一个disabled就带走，但是我发现，我特么是用view标签写的，这家伙没有disabled属性啊，该样式的话，贼麻烦

这可愁死我了，我想自己实现一个disabled？ 或者把view 都改成button，一天，整整一天！！！

最后 发现解铃换续集令人

你怎么就显示灰色，还不是数据的某个字段为false
那就弄一个if else 如果没有匹配到，我就显示灰色，匹配到我就正常展示。
至于不可点击，点击的时候，在里面传递匹配的字段。如果这个字段为false，那么直接return false。后面的就不执行了，这不也是禁止点击了吗！！！