avue多选框事件,简单易懂
我一心想着和大家分享,刚好是公司叫我优化复选框事件时发现的
首先目前公司里用的是tree结构,然后禁止选项是所有父类
你们也可以去avue官方看看禁用的标识,例:我这里是子类的子类某字段type==5
children都不能选的情况下,只能选取属性type,这里的type是某一个特殊值,就像没有下级子类一样,可以参考本小白写的,并不高深一看就会的来学一下吧
方法里遍历需要找到tree结构的list,记住一定要有tree,你可以在前端一个一个的找,或者后端拿也行
选中的到选择的样本里,需要push到后面的表格里
所以需要监视这个值,普及一下,这个watch是一出现页面就会被监视,是很灵活的vue一个实例属性,希望大家别简写formData.projectId,一定要加上两个单引号这样是一个好习惯
currentSelectionChange就是点击选择框的方法
监视的方法就是互相绑定,使得复选框里选择的内容与外面一致
最主要就是这里上面的只是方便理解,这是关键的两行代码,我也不想写很多东西给大家看,其实实现就两步而已!哈哈哈
上面的复选框选择的值到外面表格的就写完了,然后会实现,你点一个或者取消一个都会和外面表格一致,然后还有一个全选方法,别忘了这个
并且每次点击全选按钮都会回调currentSelectionChange方法,你们也可以写一些东西证明
this.$refs.currentTreeOptionCrud.toggleSelection(某某某)就是多选框里勾上的(这个绑定的方法就算是禁用的父类都会被选中需要勾选谁就把这里的某某某放进去),这里我是勾选的子类中的子类,所以先forEach遍历了子类,然后子类的children就是我想要的
最后点击全选就可以遍历到所有子类
