没有相应营业执照怎么做网站,网址怎么申请网站,免费推广自己的产品,深圳外贸网站推广导语:Vue中单选下拉框开发起来非常简单,直接select包裹一个带v-for的option即可但是当我们想做个带多选的下拉框该怎么办呢?最简方法是什么?比如下面这个图:如果网上搜的话,搜的是一堆带children的 ,那种是遍历tree的思想,和多选下拉框不是一回事,而且写起来复杂看不懂源码再…导语:Vue中单选下拉框开发起来非常简单,直接select包裹一个带v-for的option即可但是当我们想做个带多选的下拉框该怎么办呢?最简方法是什么?比如下面这个图:如果网上搜的话,搜的是一堆带children的 ,那种是遍历tree的思想,和多选下拉框不是一回事,而且写起来复杂看不懂源码再往下读:需求:后端传前端一个数组对象,每个对象有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地址点个赞 谢谢!
