From 251d2411f235e23209d57173857e05b637729ce8 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期日, 02 四月 2023 01:01:56 +0800
Subject: [PATCH] refactor ts
---
src/components/TreeSelect/index.vue | 88 ++++++++++++++++++++++---------------------
1 files changed, 45 insertions(+), 43 deletions(-)
diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue
index 4ff0e76..8e5f567 100644
--- a/src/components/TreeSelect/index.vue
+++ b/src/components/TreeSelect/index.vue
@@ -1,36 +1,5 @@
-<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>
-
-const { proxy } = getCurrentInstance();
+<script setup lang="ts">
+import { ElTreeSelect } from 'element-plus'
const props = defineProps({
/* 閰嶇疆椤� */
@@ -68,6 +37,9 @@
}
})
+
+const selectTree = ref(ElTreeSelect);
+
const emit = defineEmits(['update:value']);
const valueId = computed({
@@ -77,16 +49,16 @@
}
});
const valueTitle = ref('');
-const defaultExpandedKey = ref([]);
+const defaultExpandedKey = ref<any[]>([]);
function initHandle() {
nextTick(() => {
const selectedValue = valueId.value;
if(selectedValue !== null && typeof (selectedValue) !== 'undefined') {
- const node = proxy.$refs.selectTree.getNode(selectedValue)
+ const node = selectTree.value.getNode(selectedValue)
if (node) {
valueTitle.value = node.data[props.objMap.label]
- proxy.$refs.selectTree.setCurrentKey(selectedValue) // 璁剧疆榛樿閫変腑
+ selectTree.value.setCurrentKey(selectedValue) // 璁剧疆榛樿閫変腑
defaultExpandedKey.value = [selectedValue] // 璁剧疆榛樿灞曞紑
}
} else {
@@ -94,17 +66,17 @@
}
})
}
-function handleNodeClick(node) {
+function handleNodeClick(node: any) {
valueTitle.value = node[props.objMap.label]
valueId.value = node[props.objMap.value];
defaultExpandedKey.value = [];
- proxy.$refs.treeSelect.blur()
+ selectTree.value.blur()
selectFilterData('')
}
-function selectFilterData(val) {
- proxy.$refs.selectTree.filter(val)
+function selectFilterData(val: any) {
+ selectTree.value.filter(val)
}
-function filterNode(value, data) {
+function filterNode(value: any, data: any) {
if (!value) return true
return data[props.objMap['label']].indexOf(value) !== -1
}
@@ -128,7 +100,7 @@
})
</script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
padding: 0;
@@ -153,4 +125,34 @@
background-color: mix(#fff, $--color-primary, 90%);
color: $--color-primary;
}
-</style>
\ No newline at end of file
+</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