| | |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | <script setup lang="ts"> |
| | | |
| | | const props = defineProps({ |
| | | /* 配置项 */ |
| | |
| | | } |
| | | }) |
| | | |
| | | |
| | | const selectTree = ref<ElTreeSelectInstance>(); |
| | | |
| | | const emit = defineEmits(['update:value']); |
| | | |
| | | const valueId = computed({ |
| | |
| | | } |
| | | }); |
| | | const valueTitle = ref(''); |
| | | const defaultExpandedKey = ref([]); |
| | | const defaultExpandedKey = ref<any[]>([]); |
| | | |
| | | function initHandle() { |
| | | const initHandle = () => { |
| | | nextTick(() => { |
| | | const selectedValue = valueId.value; |
| | | if(selectedValue !== null && typeof (selectedValue) !== 'undefined') { |
| | | const node = proxy.$refs.selectTree.getNode(selectedValue) |
| | | if (selectedValue !== null && typeof (selectedValue) !== 'undefined') { |
| | | 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 { |
| | |
| | | } |
| | | }) |
| | | } |
| | | function handleNodeClick(node) { |
| | | const 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) |
| | | const selectFilterData = (val: any) => { |
| | | selectTree.value?.filter(val) |
| | | } |
| | | function filterNode(value, data) { |
| | | const filterNode = (value: any, data: any) => { |
| | | if (!value) return true |
| | | return data[props.objMap['label']].indexOf(value) !== -1 |
| | | } |
| | | function clearHandle() { |
| | | const clearHandle = () => { |
| | | valueTitle.value = '' |
| | | valueId.value = '' |
| | | defaultExpandedKey.value = []; |
| | | clearSelected() |
| | | } |
| | | function clearSelected() { |
| | | const clearSelected = () => { |
| | | const allNode = document.querySelectorAll('#tree-option .el-tree-node') |
| | | allNode.forEach((element) => element.classList.remove('is-current')) |
| | | } |
| | |
| | | }) |
| | | </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; |
| | | background-color: #fff; |
| | |
| | | background-color: mix(#fff, $--color-primary, 90%); |
| | | color: $--color-primary; |
| | | } |
| | | </style> |
| | | </style> |