若依的下拉组件太复杂,我改了一下,希望对大家有帮助,基于 element-plus el-tree-select 组件:
举个栗子,TreeSelect.vue:
<template>
<div>
<el-tree-select
style="width:100%"
v-model="valueId"
id="tree-option"
ref="selectTree"
:placeholder="placeholder"
clearable
filterable
:accordion="accordion"
:data="options"
:props="objMap"
:node-key="objMap.value"
:expand-on-click-node="false"
:default-expand-all="defaultExpandAll"
></el-tree-select>
</div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const props = defineProps({
defaultExpandAll:{
type : Boolean,
default : ()=>{ return false}
},
/* 配置项 */
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)
}
})
</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>
标签:__,el,default,多级,tree,color,vue3,组件,type
From: https://www.cnblogs.com/kitty-blog/p/17381940.html