问题描述:当需改的时候如果父节点为选中状态子节点不是全选中这样会显示为子节点为全选中状态
代码:
<el-tree
v-model="data.xxx"
:data="xxx"
show-checkbox
node-key="id"
ref="tree"
:check-strictly="true"//在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false
:default-checked-keys="assignPerCon.permissionArr"
@check="clickDeal"//父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。
:props="defaultProps">
</el-tree>
clickDeal (currentObj, treeStatus) {
// 用于:父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。
let selected = treeStatus.checkedKeys.indexOf(currentObj.id); // -1未选中
// 选中
if (selected !== -1) {
// 子节点只要被选中父节点就被选中
this.selectedParent(currentObj);
// 统一处理子节点为相同的勾选状态
this.uniteChildSame(currentObj, true)
} else {
// 未选中 处理子节点全部未选中
if (currentObj.children !== undefined){
if (currentObj.children.length !== 0) {
this.uniteChildSame(currentObj, false)
}
//放开时为当子节点全为未选中时父节点也变为未选中状态 注释后就是父节点不和子节点强制绑定
// this.uniteParentSame(currentObj.id,treeStatus)//当子节点全为未选中时父节点也变为未选中状态
}
// else {
// this.uniteParentSame(currentObj.id,treeStatus)
// }
}
},
uniteParentSame(id,treeStatus){//当子节点全为未选中时父节点也变为未选中状态
let node = this.$refs.tree.getNode(id);//获取当前节点的节点树
if (node.parent !== null && node.parent !== undefined) {
let parentNode = node.parent.data;//获取当前节点的父节点树
if (parentNode != undefined){//判断父节点是否存在
for (let i = 0; i < parentNode.children.length; i++) {
let checkedKeys = this.$refs.tree.getCheckedKeys();
let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
let selectNodes = checkedKeys.concat(hafCheckedKeys);//获取已选择树节点
let selected = selectNodes.indexOf(parentNode.children[i].id); // -1当前节点的同级节点是否全部未选中
if (selected !== -1){
return;
}
}
}else {
return;
}
this.$refs.tree.setChecked(parentNode.id, false);//修改节点为未选择
if(node.level>2){//判断是否是最上级节点
this.uniteParentSame(parentNode.id,treeStatus)
}
}else {
return;
}
},
// 统一处理子节点为相同的勾选状态
uniteChildSame (treeList, isSelected) {
this.$refs.tree.setChecked(treeList.id, isSelected);
if (treeList.children !== undefined){
for (let i = 0; i < treeList.children.length; i++) {
this.uniteChildSame(treeList.children[i], isSelected)
}
}
},
// 统一处理父节点为选中
selectedParent (currentObj) {
let currentNode = this.$refs.tree.getNode(currentObj);
if (currentNode.parent.key !== undefined) {
this.$refs.tree.setChecked(currentNode.parent, true);
this.selectedParent(currentNode.parent)
}
},
v-model 只能用于表单控件,如果用于其他元素。如何让组件的 v-model 生效呢?需要按照 Vue 的约定:接受一个 value 属性,在有新的 value 时触发 input 事件
使用Vue实现Tab功能。创建一个tab.vue文件,内容如下:其中change方法和tabs需要父组件中定义,tabs的格式如下:为确保正确渲染,id需要保证唯一性。
Flutter 中有很多 UI 控件,而文本、图片和按钮是 Flutter 中最基本的控件,构建视图基本上都要使用到这三个基本控件;文本是视图系统中的常见控件,用于显示一段特定样式的字符串
共有两种实现比较简单的方式,第一种比较好理解,将一个控件的透明度设置成0,打到隐藏的目的。第二种办法是使用 SDK 自带的 Offstage 控件包裹。
服务器端渲染 (SSR) 在服务器上生成静态页面来减少应用程序的加载时间。SSR 仅用于 Angular Universal 应用程序,但对于 DevExtreme 组件,Angular Universal 和普通 Angular 应用程序没有区别
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!