如何建设招聘网站,wordpress代码实现图片放大,wordpress怎么修改首页,网站logo用什么来做el-tree父子不互相关联时#xff0c;手动实现全选、反选、子级全选、清空功能
1、功能实现图示 2、实现思路
当属性check-strictly为true时#xff0c;父子节点不互相关联#xff0c;如果需要全部选中或选择某一节点下的全部节点就必须手动选择每个节点#xff0c;十分麻…el-tree父子不互相关联时手动实现全选、反选、子级全选、清空功能
1、功能实现图示 2、实现思路
当属性check-strictly为true时父子节点不互相关联如果需要全部选中或选择某一节点下的全部节点就必须手动选择每个节点十分麻烦。可以通过ref操做el-tree的getCheckedKeys、getCheckedNodes、setCheckedKeys方法手动快速节点选择。
3、代码实现
templatediv classlist_treediv classflex mb10el-buttonv-foritem in treeButtonPropssizeminitypeprimaryclassmr5:keyitem.treeKey:disableditem.isDisb ? isdisChildAll : falseclickonChecked(item.treeKey){{ item.text }}/el-button/divel-treereftreeRef:datatreeDatashow-checkboxnode-keydeptIdcheck-strictlydefault-expand-allcheck-changecheckChange//div
/templatescript
export default {data() {return {// tree数据结构....treeData: [{deptId: 130200,label: 河北省/唐山市,pid: null,regionCode: 130200,type: 1,topId: null,children: [{deptId: 13020001,label: 唐山教育局,pid: 130200,regionCode: 130200,type: 2,topId: 130200,children: [{deptId: 130200001,label: 唐山初级中学校,pid: 13020001,regionCode: 130200,type: 2,children: null,topId: 130200},{deptId: 130200002,label: 唐山市初级二中,pid: 13020001,regionCode: 130200,type: 2,children: null,topId: 130200}]}]}/// more-data.......],isdisChildAll: false,treeKeysList: [],treeButtonProps: [{ text: 全选, isDisb: false, treeKey: all },{ text: 反选, isDisb: false, treeKey: reverse },{ text: 子级全选, isDisb: true, treeKey: childAll },{ text: 清空, isDisb: false, treeKey: clear }]};},methods: {// 获取树所有key集合getTreeKeys() {this.treeKeysList [];const treeData deepClone(this.treeData);while (treeData.length 0) {const item treeData.pop();this.treeKeysList.push(item.deptId);if (item.children item.children.length 0) {treeData.push(...item.children);}}},// 设置子级全选是否禁用checkChange(data, checked) {// 没有选中含有子级节点时禁用if (checked) {this.isdisChildAll !(data.children data.children.length 0);} else {this.isdisChildAll true;}},// 全选、反选、子级全选、清空onChecked(type) {// 最终选中的keyslet setKeysList [];const treeNode this.$refs.treeRef;// 已选中keysconst checkedKeys treeNode.getCheckedKeys();if (type clear) {setKeysList [];}if (type all) {setKeysList this.treeKeysList;}if (type reverse) {// 未选中keys集合setKeysList this.treeKeysList.filter(item checkedKeys.indexOf(item) -1);}if (type childAll) {setKeysList checkedKeys;// 目前被选中的节点所组成的数组const checkNodes treeNode.getCheckedNodes();// 筛选出有子节点的nodeconst hasChildNodes checkNodes.filter(item item.children item.children.length 0);// 循环遍历出子节点集合while (hasChildNodes.length 0) {const item hasChildNodes.pop();setKeysList.push(item.deptId);if (item.children item.children.length 0) {hasChildNodes.push(...item.children);}}}// 设置节点选中状态treeNode.setCheckedKeys(setKeysList);}}
};
/script 本文由博客一文多发平台 OpenWrite 发布
