导语:Vue中单选下拉框开发起来非常简单,直接select包裹一个带v-for的option即可
但是当我们想做个带多选的下拉框该怎么办呢?最简方法是什么?比如下面这个图:
如果网上搜的话,搜的是一堆带children的 ,那种是遍历tree的思想,和多选下拉框不是一回事,而且写起来复杂
话不多说,先上源码,GitHub - bill-mark/Vue-list-allchecked_suppurt: vue下拉list支持全选功能
看不懂源码再往下读:
需求:后端传前端一个数组对象,每个对象有id和name,前端把被选中对象的id传给后端.
分析:前端先声明一个空数组,拿到后端返回的数组后,给该数组新增一个name为全部的对象元素
接下来写HTML:
下面就是JS了:
JS只watch这个数组不需要写额外的方法,够简单吧.
核心点有两个:
1.Vue想watch一个数组对象的变化,需要声明为deep 就是深度watch的意思.
原因:Vue会把data遍历成一个树,只watch指定的节点本身,如果节点还有子节点不会管,加个deep是让Vue也watch子节点
2.name为'全部'的对象,比其他对象多了一个last_state属性
因为JS中把一个数组赋值一个变量,其实是这个变量的引用指向这个数组.在Vue的watch中,旧值与新值的引用指向同一个数组,当用户点了全选,判断不了全选之前的状态是被选中还是没被选中,所以要把上一个状态存在last_state中,当用户点了全选,如果last_state为true说明是取消全选的操作,如果last_state为false说明是勾选全选的操作
非核心点有一个:
怎么实现子全选后,全选框被勾选呢?
或者全部勾选后,去掉一个子节点,怎么把父(伪)节点也去掉呢?
解决方案:在watch中声明空数组,然后把state为true的元素加入进来,剩下的就是比较判断了
最后把watch声明的空数组的id取出来传给后端即可
到这里,贴一段源码的watch代码:
如果没有起效果,brand深度复制下
如果对你有帮助,麻烦到源码的github地址点个赞 谢谢!
GitHub - bill-mark/Vue-list-allchecked_suppurt: vue下拉list支持全选功能
