京东网站建设流程,推荐网站网页,站长工具使用方法,网站建设与维护浙江省试题前言#xff1a;
这个需求也是最近项目中遇到的#xff0c;说实话是真的恶心。为啥这么说呢#xff0c;是因为需求方根本就不知道真正的el-tree父子关联关系是什么样的#xff0c;通知下来的要求就是要体现父子选中关系#xff0c;那我自然就是直接使用的el-tree组件上默…前言
这个需求也是最近项目中遇到的说实话是真的恶心。为啥这么说呢是因为需求方根本就不知道真正的el-tree父子关联关系是什么样的通知下来的要求就是要体现父子选中关系那我自然就是直接使用的el-tree组件上默认的关系。结果提交后需求方说我这不是树的父子关系树的父子关系不是这样的还质问我选中父节点后为什么下面的所有子节点都选中了。。。。我也是很无语。后来又详细沟通了下才知道要的是下面这种效果
需求描述
el-tree组件
1. 选中父节点只勾选当前节点
2. 选中子节点勾选上面所有的父节点除了根节点
3. 取消勾选子节点如果有同级子节点是勾选状态父节点不取消勾选反之取消 效果展示 修改el-tree组件的父子关系选中节点后向上选中所有父级 代码实现
html部分
templatedivel-input placeholder输入关键字进行过滤 v-modelfilterText/el-inputel-treereftree:datadatanode-keylabeldefault-expand-allshow-checkbox:propsdefaultProps:check-strictlytrue:filter-node-methodfilterNodecheckhandleCheck/el-tree/div
/template
JavaScript部分
script
export default {data() {return {// 树数据data: [{id: 1,label: 根目录,parentId: -1,creater: 小明,disabled: true,children: [{id: 2,label: 一级 1,parentId: 1,creater: 小朋,children: [{id: 5,label: 二级 1-1,parentId: 2,creater: 王五,children: [{id: 9,label: 三级 1-1-1,parentId: 5,creater: 张三,},{id: 10,label: 三级 1-1-2,parentId: 5,creater: 张三,},],},],},{id: 3,label: 一级 2,parentId: 1,creater: 小明,children: [{id: 6,label: 二级 2-1,parentId: 3,creater: 小明,},{id: 7,label: 二级 2-2,parentId: 3,creater: 小鹏,},],},{id: 4,label: 一级 3,parentId: 1,creater: 小鹏,children: [{id: 8,label: 二级 3-1,parentId: 4,creater: 小丽,},{id: 11,label: 二级 3-2,creater: 小丽,children: [{id: 12,label: 三级 3-2-1,parentId: 11,creater: 张三,},{id: 13,label: 三级 3-2-2,parentId: 11,creater: 王五,},{id: 14,label: 三级 3-2-3,parentId: 11,creater: 小丽,},],},],},],},],defaultProps: {children: children,label: label,},// 默认选中节点defaultCheckedKeys: [],}},methods: {/**标签树的复选框点击事件 */handleCheck(node) {this.upTreeParent(node)},/**树结构向上查找父标签节点 */upTreeParent(node) {// 获取点击标签节点的父标签节点const parentNode this.$refs.tree.getNode(node).parent.data// 获取点击标签节点的兄弟节点const sublings_list parentNode.children// 获取当前选中的标签节点,用来获取当前的选中状态const nodeChecked this.$refs.tree.getCheckedNodes()const isNodeChecked nodeChecked.some((i) i.id node.id)if (isNodeChecked) {// 添加点击的标签this.defaultCheckedKeys.push(node.label)} else {// 移除点击的标签this.defaultCheckedKeys this.defaultCheckedKeys.filter(i i ! node.label)}if (parentNode) {if (isNodeChecked) {if (parentNode.id ! 1) {this.defaultCheckedKeys.push(parentNode.label)}} else {// 此处需要判断如果取消勾选是否有同级别的兄弟标签有勾选的状态如果有则父标签不取消勾选const subling_listArr sublings_list.map((item) item.label)// 有则flag为truelet flag this.defaultCheckedKeys.some(i subling_listArr.includes(i))// 如果同级节点没有勾选则取消父节点的勾选console.log(flag, flag)if (!flag) this.defaultCheckedKeys this.defaultCheckedKeys.filter((i) i ! parentNode.label)}// 去重this.defaultCheckedKeys Array.from(new Set(this.defaultCheckedKeys))console.log(defaultCheckedKeys, this.defaultCheckedKeys)// 设置勾选上的节点this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys)// 递归向上查找所有父节点if (parentNode.parentId ! -1) {this.upTreeParent(parentNode)}}},},
}
/script
