RuoYi
1 year ago
16 changed files with 392 additions and 273 deletions
|
After Width: | Height: | Size: 619 B |
|
After Width: | Height: | Size: 1.4 KiB |
@ -1,156 +0,0 @@ |
|||
<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(); |
|||
|
|||
const props = defineProps({ |
|||
/* 配置项 */ |
|||
objMap: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
value: 'id', // ID字段名 |
|||
label: 'label', // 显示名称 |
|||
children: 'children' // 子级字段名 |
|||
} |
|||
} |
|||
}, |
|||
/* 自动收起 */ |
|||
accordion: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
/**当前双向数据绑定的值 */ |
|||
value: { |
|||
type: [String, Number], |
|||
default: '' |
|||
}, |
|||
/**当前的数据 */ |
|||
options: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
/**输入框内部的文字 */ |
|||
placeholder: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['update:value']); |
|||
|
|||
const valueId = computed({ |
|||
get: () => props.value, |
|||
set: (val) => { |
|||
emit('update:value', val) |
|||
} |
|||
}); |
|||
const valueTitle = ref(''); |
|||
const defaultExpandedKey = ref([]); |
|||
|
|||
function initHandle() { |
|||
nextTick(() => { |
|||
const selectedValue = valueId.value; |
|||
if(selectedValue !== null && typeof (selectedValue) !== 'undefined') { |
|||
const node = proxy.$refs.selectTree.getNode(selectedValue) |
|||
if (node) { |
|||
valueTitle.value = node.data[props.objMap.label] |
|||
proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中 |
|||
defaultExpandedKey.value = [selectedValue] // 设置默认展开 |
|||
} |
|||
} else { |
|||
clearHandle() |
|||
} |
|||
}) |
|||
} |
|||
function handleNodeClick(node) { |
|||
valueTitle.value = node[props.objMap.label] |
|||
valueId.value = node[props.objMap.value]; |
|||
defaultExpandedKey.value = []; |
|||
proxy.$refs.treeSelect.blur() |
|||
selectFilterData('') |
|||
} |
|||
function selectFilterData(val) { |
|||
proxy.$refs.selectTree.filter(val) |
|||
} |
|||
function filterNode(value, data) { |
|||
if (!value) return true |
|||
return data[props.objMap['label']].indexOf(value) !== -1 |
|||
} |
|||
function clearHandle() { |
|||
valueTitle.value = '' |
|||
valueId.value = '' |
|||
defaultExpandedKey.value = []; |
|||
clearSelected() |
|||
} |
|||
function clearSelected() { |
|||
const allNode = document.querySelectorAll('#tree-option .el-tree-node') |
|||
allNode.forEach((element) => element.classList.remove('is-current')) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
initHandle() |
|||
}) |
|||
|
|||
watch(valueId, () => { |
|||
initHandle(); |
|||
}) |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
@import "@/assets/styles/variables.module.scss"; |
|||
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item { |
|||
padding: 0; |
|||
background-color: #fff; |
|||
height: auto; |
|||
} |
|||
|
|||
.el-select-dropdown__item.selected { |
|||
font-weight: normal; |
|||
} |
|||
|
|||
ul li .el-tree .el-tree-node__content { |
|||
height: auto; |
|||
padding: 0 20px; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
:deep(.el-tree-node__content:hover), |
|||
:deep(.el-tree-node__content:active), |
|||
:deep(.is-current > div:first-child), |
|||
:deep(.el-tree-node__content:focus) { |
|||
background-color: mix(#fff, $--color-primary, 90%); |
|||
color: $--color-primary; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue