[vue]vue多行多选的添加全选问题

147 阅读1分钟

原本业务逻辑是多选,如今增加新需求需要把不限改为多选 旧代码是用vue原生li来写的,也不好改动

image.png

要把每一行添加一个全选,旧代码好乱,一时不知道从什么地方加代码,但是还是要处理,开工吧!

  1. npm run serve 先把项目跑起来吧
  2. 在插入数据前添加一个 json [key:-1,name:'全选'},...dataList]
  3. 在点击时间中 借助传入点击事件的 通过每一行种类不同,遍历对应rowlist中的key值,这里的key是需要提交给后台的,所以取出这一排除了-1的key 放入一个新的数组.好的那么问题来了,我要怎么跟旧代码一样去提交这一串key 的array呢?按照原来的逻辑是点击一次添加一个key,现在已经全选我直接传就好了,但是并没有生效,传过去的是空的值keylist:"" 4.解决方法 if判断一下如果点击的下标为0 那么 直接赋值 return整个 array给 keylist字段. 测试后,点击确实有效, 取消全选的方法借助旧代码中的 keylist:[0]去调用一下查询就可以了. 5.样式方面又有的头疼了,在前面添加了这个全选的字段后,通过 keylist.include(key) !==-1 通过数组判断是否选中,但是全选不在这个数组中.暂时还没有想到好的解决方案,只用了一个变量checkAll:false来控制全选显示,但是会影响到第二行的全选...

有大佬有好的办法处理这种旧代码不好改的方式方法吗?萌新求指教