在vue3中使用el-tree-select做一个树形下拉选择器

el-tree-select是一个含有下拉菜单的树形选择器,结合了 el-tree 和 el-select 两个组件的功能。

因为包含了el-tree的功能,我们可以自定义tree的节点,创造出想要的组件

使用default插槽可以自定义节点内容,它的default插槽相当于el-tree的default插槽

html 复制代码
<template>
    <el-tree-select
        v-model="dirCode"
        :data="treeData"
        :highlight-current="true"
        :props="defaultProps"
        clearable
        filterable
        node-key="pathCode"
        :placeholder="placeholder"
        @clear="handleClear">
        <template #default="{ node, data }">
            <div class="custom-tree-node" @click="data.pathCode !== '-1' ? handleNodeClick(data) : ''">
                <div class="tree-icon">
                	<!-- 这里的svg-icon是我自己加的,可以改成element-plus中的icon ---->
                    <svg-icon class="file" icon-class="file"></svg-icon>
                </div>
                <div class="tree-label one-line">
                    <span class="tree-label-text one-line">
                        {{ node.label }}
                    </span>
                </div>
            </div>
        </template>
    </el-tree-select>
</template>

使用:model-value="modelValue"可以在适合用组件时直接v-model绑定值

我这里使用的是setup式的语法,当然也可以使用setup()方法

javascript 复制代码
<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { getDirectory } from 'api/autoOperations/scriptManage'

const props = defineProps({
    placeholder: {
        type: String,
        default: '请选择目录',
        required: false
    },
    code: {
        type: String,
        default: '',
        required: false
    },
    path: {
        type: String,
        default: '',
        required: false
    }
})

let dirCode = ref('')
let dirPath = ref('')
const treeData = ref([])

const emits = defineEmits(['change'])

// 树状图默认配置
const defaultProps = reactive({
  children: 'children',
  label: 'pathName',
  isLeaf(data, node) {
    return data.isLeaf == 'true'
  }
})

watch(() => props.code, (val) => {
    if (val) {
        dirCode.value = val
    }
}, {
    immediate: true,
    deep: true
})
watch(() => props.path, (val) => {
    if (val) {
        dirPath.value = val
    }
}, {
    immediate: true,
    deep: true
})

onMounted(() => {
    getTreeData()
})

// 这里从数据库获取数据
const getTreeData = () => {
   
}

const handleNodeClick = (data) => {
    dirCode.value = data.pathCode
    dirPath.value = data.dirPath
    emits('change', {
        dirPath: dirPath.value,
        dirCode: dirCode.value
    })
}

const handleClear = () => {
    dirCode.value = ''
    dirPath.value = ''
    emits('change', {
        dirPath: dirPath.value,
        dirCode: dirCode.value
    })
}

</script>

这是我的自定义样式,用的scss

html 复制代码
<style lang="scss" scoped>
.custom-tree-node {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 24px);
    font-size: 12px;
    line-height: 24px;
    .tree-icon {
        width: 20px;
        display: flex;
        align-items: center;
        .file {
        width: 20px;
        font-size: 20px;
        vertical-align: text-bottom;
        }
    }
    .tree-label {
        width: 100%;
        height: 24px;
        line-height: 24px;
        .tree-label-text {
            display: inline-block;
            max-width: calc(100% - 30px);
        }
    }
}
</style>

最后是效果图

相关推荐
bitbitDown1 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易5 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
markyankee1016 分钟前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
ma779 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在9 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
借月11 分钟前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang13 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻14 分钟前
前端面试十一之TS
前端
摆烂为不摆烂14 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead27 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试