From 97187b246b94dd58cb585ebaed7e8644d2f00119 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 03 四月 2023 00:26:04 +0800 Subject: [PATCH] update 调整代码格式 --- src/components/TreeSelect/index.vue | 116 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 58 insertions(+), 58 deletions(-) diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue index 0df87f0..8f80377 100644 --- a/src/components/TreeSelect/index.vue +++ b/src/components/TreeSelect/index.vue @@ -1,39 +1,69 @@ +<template> + <div class="el-tree-select"> + <el-select + style="width: 100%" + v-model="valueId" + ref="treeSelect" + :filterable="true" + :clearable="true" + @clear="clearHandle" + :filter-method="selectFilterData" + :placeholder="placeholder" + > + <el-option :value="valueId" :label="valueTitle"> + <el-tree + id="tree-option" + ref="selectTree" + :accordion="accordion" + :data="options" + :props="objMap" + :node-key="objMap.value" + :expand-on-click-node="false" + :default-expanded-keys="defaultExpandedKey" + :filter-node-method="filterNode" + @node-click="handleNodeClick" + ></el-tree> + </el-option> + </el-select> + </div> +</template> + <script setup lang="ts"> import { ElTreeSelect } from 'element-plus' const props = defineProps({ /* 閰嶇疆椤� */ objMap: { - type: Object, - default: () => { - return { - value: 'id', // ID瀛楁鍚� - label: 'label', // 鏄剧ず鍚嶇О - children: 'children' // 瀛愮骇瀛楁鍚� - } + type: Object, + default: () => { + return { + value: 'id', // ID瀛楁鍚� + label: 'label', // 鏄剧ず鍚嶇О + children: 'children' // 瀛愮骇瀛楁鍚� } + } }, /* 鑷姩鏀惰捣 */ accordion: { - type: Boolean, - default: () => { - return false - } + type: Boolean, + default: () => { + return false + } }, /**褰撳墠鍙屽悜鏁版嵁缁戝畾鐨勫�� */ value: { - type: [String, Number], - default: '' + type: [String, Number], + default: '' }, /**褰撳墠鐨勬暟鎹� */ options: { - type: Array, - default: () => [] + type: Array, + default: () => [] }, /**杈撳叆妗嗗唴閮ㄧ殑鏂囧瓧 */ placeholder: { - type: String, - default: '' + type: String, + default: '' } }) @@ -45,7 +75,7 @@ const valueId = computed({ get: () => props.value, set: (val) => { - emit('update:value', val) + emit('update:value', val) } }); const valueTitle = ref(''); @@ -53,17 +83,17 @@ function initHandle() { nextTick(() => { - const selectedValue = valueId.value; - 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] // 璁剧疆榛樿灞曞紑 - } - } else { - clearHandle() + const selectedValue = valueId.value; + 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] // 璁剧疆榛樿灞曞紑 } + } else { + clearHandle() + } }) } function handleNodeClick(node: any) { @@ -126,33 +156,3 @@ color: $--color-primary; } </style> - -<template> - <div class="el-tree-select"> - <el-select - style="width: 100%" - v-model="valueId" - ref="treeSelect" - :filterable="true" - :clearable="true" - @clear="clearHandle" - :filter-method="selectFilterData" - :placeholder="placeholder" - > - <el-option :value="valueId" :label="valueTitle"> - <el-tree - id="tree-option" - ref="selectTree" - :accordion="accordion" - :data="options" - :props="objMap" - :node-key="objMap.value" - :expand-on-click-node="false" - :default-expanded-keys="defaultExpandedKey" - :filter-node-method="filterNode" - @node-click="handleNodeClick" - ></el-tree> - </el-option> - </el-select> - </div> -</template> -- Gitblit v1.9.3