自定义el

您所在的位置：网站首页 › 复选框的value属性为0时表示该复选框 › 自定义el

自定义el

2024-07-11 16:00| 来源: 网络整理| 查看: 265

自定义el-tree复选框选中状态

:check-strictly属性：该属性默认false，表示严格遵循父子相互关联。父子相互关联（即选中父节点其所有子节点全部选中，取消选中父节点其子节点全部取消，且折叠、展开状态都一样）。

Attributes属性参数说明类型可选值默认值check-strictly在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 falseboolean—falsenode-key每个树节点用来作为唯一标识的属性，整棵树应该是唯一的Stringdata展示数据arrayshow-checkbox节点是否可被选择（展示复选框）boolean—falseprops配置选项，具体看下表object props 参数说明类型可选值默认值label指定节点标签为节点对象的某个属性值string, function(data, node)——children指定子树为节点对象的某个属性值string—— 方法

Tree 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。 Tree 拥有如下方法：

方法名说明参数setChecked通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点，默认为 false Events 事件名称说明回调参数check当复选框被点击的时候触发共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性实现el-tree复选框选中父级的同时选中父级的第一子级

（只需选中第一子级，往下的第二第三子级不需选中）

现在我们要实现选中父级的同时只选中父级的第一层子级，默认是全选中的状态即严格遵循父子相互关联，所以:check-strictly="false"无法实现此需求。所以只能使:check-strictly="true"不严格遵循父子相互关联，此时选中父级所有子级都不会被选中。要实现以上需求，需要自定义父级与子级之间相互关联的关系。

在:check-strictly="true"的前提下，写方法。首先，需要判断当前所选节点是有无子节点，如果存在子节点，然后再对其子节点进行操作。

下面代码解释：

checkedNodes,checkedKeys解释见上面表格，checkedKeys.checkedKeys是树目前的选中状态对象的数组且该数组只由node-key绑定的值组成，例（如下代码）：id。例如checkedKeys.checkedKeys=["1","2"]。当前所选节点checkedNodes由当前节点对应的data数据组成，例如：checkedNodes=[id: 2, label: '一级 2',children: ...]。

若当前节点是选中状态，即checkedKeys.checkedKeys中存在checkedNodes所对应的id，即使用indexOf方法是返回checkedNodes的id在checkedKeys.checkedKeys数组中的位置。若当前节点不是选中状态，则在checkedKeys.checkedKeys数组中不存在checkedNodes的id，indexOf方法返回-1，即selected=-1。（indexOf方法的使用在下面解释）

完整代码 data(){ return{ data: [{ id: 1, label: '一级 1', }, { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }, { id: 6, label: '二级 2-2' }] }], defaultProps: { children: 'children',//指定子树为data数组中的children属性值 label: 'label'//指定节点标签为data数组中的label属性值 } } } //复选框被点击的时候触发 currentChange(checkedNodes,checkedKeys){ let selected = checkedKeys.checkedKeys.indexOf(checkedNodes.id) //当前节点为未选中状态时，selected为-1 if(checkedNodes.children!==undefined){//如果存在子级 if(selected !==-1){//如果选中 this.selectedChild(checkedNodes,true)//第一级子级选中 }else{//取消选中时 this.selectedChild(checkedNodes,false)//第一级子级取消选中 } } //获取当前所选节点的数据数组 let checkdata=this.$refs.tree.getCheckedNodes() }, selectedChild(checkedNodes,isSelected){ //checkedNodes.children是当前节点的第一级子节点checkedNodes.children.children是第二级 for(let i=0;i

【本文地址】

自定义el

自定义el

今日新闻

推荐新闻