vue + iview 树图三态

最新推荐文章于 2024-07-11 11:24:37 发布

soldierofyou

最新推荐文章于 2024-07-11 11:24:37 发布

阅读量718

点赞数

分类专栏： IT软件

本文链接：https://blog.csdn.net/soldierofyou/article/details/95948406

版权

IT软件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<body>
<div id="treeView"></div>
<script>
var app = new Vue({
el: "#treeView",
data: {
//上次选中节点
lastChecked: null,
//选中模式
checkStrictly: true,
//子节点是否全选
childAllChecked: true,
//数据源
baseData: [{
expand: true,
title: 'parent 1',
children: [{
title: 'parent 1-0',
expand: true,
children: [{
title: 'leaf',
expand: true,
children: [{
title: 'parent 1-0',
expand: true,
children: [{
title: 'leaf',
expand: true,
children: [{
title: 'leaf'
}, {
title: 'leaf'
}]
}, {
title: 'leaf'
}]
}]
}, {
title: 'leaf',
expand: true,
children: [{
title: 'leaf'
}, {
title: 'leaf'
}]
}]
}, {
title: 'parent 1-1',
expand: true,
children: [{
title: 'aaa',
}]
}]
}]
},
methods: {
//点击复选框事件
changeChecked(allNodes, nodeSelf) {
//console.log(nodeSelf);
if(!nodeSelf.children) {
this.$set(nodeSelf, 'checked', nodeSelf.checked);
this.parentNodeProgress(nodeSelf.nodeKey);
return;
}
if((this.lastChecked !== nodeSelf && nodeSelf.checked) || (this.lastChecked === nodeSelf && nodeSelf.step === 0)) { //单选
//勾选节点
nodeSelf.checked = true;
nodeSelf.indeterminate = true;
this.childNodeProgress(nodeSelf.children, false);
//步骤-完成单选
nodeSelf.step = 1;
} else if((this.lastChecked !== nodeSelf && !nodeSelf.checked) || nodeSelf.step === 2) { //取消全选
//勾选相关节点
nodeSelf.checked = false;
this.childNodeProgress(nodeSelf.children, false);
//步骤-完成全选
nodeSelf.step = 0;
} else if(nodeSelf.step === 1) { //全选
//取消勾选相关节点
nodeSelf.checked = true;
this.childNodeProgress(nodeSelf.children, true);
//步骤-取消全选
nodeSelf.step = 2;
}
//更新上次选中节点
this.parentNodeProgress(nodeSelf.nodeKey);
this.lastChecked = nodeSelf;
},
//修改子节点的属性
childNodeProgress(childrenNodeArr, status) {
var self = this;
if(childrenNodeArr) {
childrenNodeArr.map(function(item) {
self.$set(item, 'checked', status);
self.$set(item, 'indeterminate', false);
if(item.children && item.children.length > 0) {
self.childNodeProgress(item.children, status);
} else {
return;
}
})
}
},
//修改父节点的样式
parentNodeProgress(clickNodeKey) {
//获取父元素的nodeKey
var parentNodekey = this.$refs.tree.flatState[clickNodeKey].parent;
//无父元素跳出，但父元素为0时!parentNodekey为真，无法继续下面内容，遂加入另一条件
if(!parentNodekey && parentNodekey !== 0) {
return;
}
//获取父元素的node节点
var parentNode = this.$refs.tree.flatState[parentNodekey].node;
if(!parentNode.checked) {
return;
}
//初始化CheckedNum
this.childAllChecked = true;
this.selectChildNodeAllChecked(parentNode);
//this.childAllChecked判断子节点是否全被选中
if(this.childAllChecked) {
parentNode.indeterminate = false;
} else {
parentNode.indeterminate = true;
}
//如果有父节点，则继续修改父节点的样式
if(this.$refs.tree.flatState[parentNode.nodeKey].parent >= 0) {
this.parentNodeProgress(parentNode.nodeKey);
}
},
//判断子节点是否全部选中
selectChildNodeAllChecked(parentNode) {
var self = this;
parentNode.children.map(function(item) {
self.childAllChecked = item.checked && self.childAllChecked;
if(item.children && item.children.length > 0) {
self.selectChildNodeAllChecked(item);
} else {
return;
}
});
}
},
//checkDirectly-当开启 showCheckbox 时，如果开启 checkDirectly，select 将强制转为 check 事件
template: '<Tree ref="tree" :data="baseData" show-checkbox checkDirectly :check-strictly="checkStrictly" @on-check-change="changeChecked"></Tree>'
});
</script>
</body>

</html>

soldierofyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue + iview 树图三态

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/i...
复制链接

扫一扫