mirror of
https://github.com/vbenjs/vben-admin-thin-next.git
synced 2025-01-23 17:50:22 +08:00
fix(tree): fixed checkedKeys
with search
mode
修复搜索状态的切换导致的勾选值可能不正确的问题
This commit is contained in:
parent
b06a7ab77b
commit
f707541dda
@ -18,8 +18,8 @@
|
||||
import TreeHeader from './TreeHeader.vue';
|
||||
import { ScrollContainer } from '/@/components/Container';
|
||||
|
||||
import { omit, get, cloneDeep, concat, uniq } from 'lodash-es';
|
||||
import { isBoolean, isFunction } from '/@/utils/is';
|
||||
import { omit, get, difference } from 'lodash-es';
|
||||
import { isArray, isBoolean, isFunction } from '/@/utils/is';
|
||||
import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
|
||||
import { filter } from '/@/utils/helper/treeHelper';
|
||||
|
||||
@ -56,25 +56,6 @@
|
||||
searchData: [] as TreeItem[],
|
||||
});
|
||||
|
||||
const copyState = {
|
||||
checkedKeys: [],
|
||||
};
|
||||
|
||||
watch(
|
||||
() => searchState.startSearch,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal && !oldVal) {
|
||||
// before search, save current checkedKeys
|
||||
copyState.checkedKeys = cloneDeep(state.checkedKeys);
|
||||
} else if (!newVal && oldVal) {
|
||||
// after search, restore checkedKeys
|
||||
state.checkedKeys = uniq(concat(state.checkedKeys, copyState.checkedKeys));
|
||||
copyState.checkedKeys = [];
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const treeDataRef = ref<TreeItem[]>([]);
|
||||
|
||||
const [createContextMenu] = useContextMenu();
|
||||
@ -109,8 +90,19 @@
|
||||
emit('update:selectedKeys', v);
|
||||
},
|
||||
onCheck: (v: CheckKeys, e: CheckEvent) => {
|
||||
state.checkedKeys = v;
|
||||
const rawVal = toRaw(v);
|
||||
let currentValue = toRaw(state.checkedKeys) as Keys;
|
||||
if (isArray(currentValue) && searchState.startSearch) {
|
||||
const { key } = unref(getReplaceFields);
|
||||
currentValue = difference(currentValue, getChildrenKeys(e.node.$attrs.node[key]));
|
||||
if (e.checked) {
|
||||
currentValue.push(e.node.$attrs.node[key]);
|
||||
}
|
||||
state.checkedKeys = currentValue;
|
||||
} else {
|
||||
state.checkedKeys = v;
|
||||
}
|
||||
|
||||
const rawVal = toRaw(state.checkedKeys);
|
||||
emit('update:value', rawVal);
|
||||
emit('check', rawVal, e);
|
||||
},
|
||||
@ -134,6 +126,7 @@
|
||||
filterByLevel,
|
||||
updateNodeByKey,
|
||||
getAllKeys,
|
||||
getChildrenKeys,
|
||||
} = useTree(treeDataRef, getReplaceFields);
|
||||
|
||||
function getIcon(params: Recordable, icon?: string) {
|
||||
|
@ -27,6 +27,28 @@ export function useTree(
|
||||
return keys as Keys;
|
||||
}
|
||||
|
||||
function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]): Keys {
|
||||
const keys: Keys = [];
|
||||
const treeData = list || unref(treeDataRef);
|
||||
const { key: keyField, children: childrenField } = unref(getReplaceFields);
|
||||
if (!childrenField || !keyField) return keys;
|
||||
for (let index = 0; index < treeData.length; index++) {
|
||||
const node = treeData[index];
|
||||
const children = node[childrenField];
|
||||
if (nodeKey === node[keyField]) {
|
||||
keys.push(node[keyField]!);
|
||||
if (children && children.length) {
|
||||
keys.push(...(getAllKeys(children) as string[]));
|
||||
}
|
||||
} else {
|
||||
if (children && children.length) {
|
||||
keys.push(...getChildrenKeys(nodeKey, children));
|
||||
}
|
||||
}
|
||||
}
|
||||
return keys as Keys;
|
||||
}
|
||||
|
||||
// Update node
|
||||
function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
|
||||
if (!key) return;
|
||||
@ -146,5 +168,6 @@ export function useTree(
|
||||
filterByLevel,
|
||||
updateNodeByKey,
|
||||
getAllKeys,
|
||||
getChildrenKeys,
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user