From b06f6a316b6a8293bb8aba6bfff33336b66c032a Mon Sep 17 00:00:00 2001 From: ahaos <8406649+lhailgl@user.noreply.gitee.com> Date: 星期三, 13 十二月 2023 09:01:52 +0800 Subject: [PATCH] !64 版本升级 * Merge branch 'dev' of gitee.com:JavaLionLi/plus-ui into ts * 升级依赖 * !61 fix: 删除重复环境变量ElUploadInstance * fix: 删除重复环境变量ElUploadInstance --- src/components/TreeSelect/index.vue | 123 ++++++++++++++++++---------------------- 1 files changed, 56 insertions(+), 67 deletions(-) diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue index 3076804..7accd6b 100644 --- a/src/components/TreeSelect/index.vue +++ b/src/components/TreeSelect/index.vue @@ -1,14 +1,14 @@ <template> <div class="el-tree-select"> <el-select - style="width: 100%" - v-model="valueId" ref="treeSelect" + v-model="valueId" + style="width: 100%" :filterable="true" :clearable="true" - @clear="clearHandle" :filter-method="selectFilterData" :placeholder="placeholder" + @clear="clearHandle" > <el-option :value="valueId" :label="valueTitle"> <el-tree @@ -29,43 +29,32 @@ </template> <script setup lang="ts"> +interface ObjMap { + value: string; + label: string; + children: string; +} +interface Props { + objMap: ObjMap; + accordion: boolean; + value: string | number; + options: any[]; + placeholder: string; +} -const props = defineProps({ - /* 閰嶇疆椤� */ - objMap: { - type: Object, - default: () => { - return { - value: 'id', // ID瀛楁鍚� - label: 'label', // 鏄剧ず鍚嶇О - children: 'children' // 瀛愮骇瀛楁鍚� - } - } +const props = withDefaults(defineProps<Props>(), { + objMap: () => { + return { + value: 'id', + label: 'label', + children: 'children' + }; }, - /* 鑷姩鏀惰捣 */ - accordion: { - type: Boolean, - default: () => { - return false - } - }, - /**褰撳墠鍙屽悜鏁版嵁缁戝畾鐨勫�� */ - value: { - type: [String, Number], - default: '' - }, - /**褰撳墠鐨勬暟鎹� */ - options: { - type: Array, - default: () => [] - }, - /**杈撳叆妗嗗唴閮ㄧ殑鏂囧瓧 */ - placeholder: { - type: String, - default: '' - } -}) - + accordion: false, + value: '', + options: () => [], + placeholder: '' +}); const selectTree = ref<ElTreeSelectInstance>(); @@ -74,7 +63,7 @@ const valueId = computed({ get: () => props.value, set: (val) => { - emit('update:value', val) + emit('update:value', val); } }); const valueTitle = ref(''); @@ -83,54 +72,54 @@ const initHandle = () => { nextTick(() => { const selectedValue = valueId.value; - if (selectedValue !== null && typeof (selectedValue) !== 'undefined') { - const node = selectTree.value?.getNode(selectedValue) + if (selectedValue !== null && typeof selectedValue !== 'undefined') { + const node = selectTree.value?.getNode(selectedValue); if (node) { - valueTitle.value = node.data[props.objMap.label] - selectTree.value?.setCurrentKey(selectedValue) // 璁剧疆榛樿閫変腑 - defaultExpandedKey.value = [selectedValue] // 璁剧疆榛樿灞曞紑 + valueTitle.value = node.data[props.objMap.label]; + selectTree.value?.setCurrentKey(selectedValue); // 璁剧疆榛樿閫変腑 + defaultExpandedKey.value = [selectedValue]; // 璁剧疆榛樿灞曞紑 } } else { - clearHandle() + clearHandle(); } - }) -} + }); +}; const handleNodeClick = (node: any) => { - valueTitle.value = node[props.objMap.label] + valueTitle.value = node[props.objMap.label]; valueId.value = node[props.objMap.value]; defaultExpandedKey.value = []; - selectTree.value?.blur() - selectFilterData('') -} + selectTree.value?.blur(); + selectFilterData(''); +}; const selectFilterData = (val: any) => { - selectTree.value?.filter(val) -} + selectTree.value?.filter(val); +}; const filterNode = (value: any, data: any) => { - if (!value) return true - return data[props.objMap['label']].indexOf(value) !== -1 -} + if (!value) return true; + return data[props.objMap['label']].indexOf(value) !== -1; +}; const clearHandle = () => { - valueTitle.value = '' - valueId.value = '' + valueTitle.value = ''; + valueId.value = ''; defaultExpandedKey.value = []; - clearSelected() -} + clearSelected(); +}; const clearSelected = () => { - const allNode = document.querySelectorAll('#tree-option .el-tree-node') - allNode.forEach((element) => element.classList.remove('is-current')) -} + const allNode = document.querySelectorAll('#tree-option .el-tree-node'); + allNode.forEach((element) => element.classList.remove('is-current')); +}; onMounted(() => { - initHandle() -}) + initHandle(); +}); watch(valueId, () => { initHandle(); -}) +}); </script> <style lang="scss" scoped> -@import "@/assets/styles/variables.module.scss"; +@import '@/assets/styles/variables.module.scss'; .el-scrollbar .el-scrollbar__view .el-select-dropdown__item { padding: 0; -- Gitblit v1.9.3