快捷導(dǎo)航

在vue3中使用el-tree-select實(shí)現(xiàn)樹(shù)形下拉選擇器效果

更新時(shí)間：2024年03月07日 14:32:53 作者：偷只貓來(lái)養(yǎng)

el-tree-select是一個(gè)含有下拉菜單的樹(shù)形選擇器,結(jié)合了?el-tree?和?el-select?兩個(gè)組件的功能,這篇文章主要介紹了在vue3中使用el-tree-select做一個(gè)樹(shù)形下拉選擇器,需要的朋友可以參考下

el-tree-select是一個(gè)含有下拉菜單的樹(shù)形選擇器，結(jié)合了 el-tree 和 el-select 兩個(gè)組件的功能。

因?yàn)榘薳l-tree的功能，我們可以自定義tree的節(jié)點(diǎn)，創(chuàng)造出想要的組件

使用default插槽可以自定義節(jié)點(diǎn)內(nèi)容，它的default插槽相當(dāng)于el-tree的default插槽

<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"可以在適合用組件時(shí)直接v-model綁定值
我這里使用的是setup式的語(yǔ)法，當(dāng)然也可以使用setup()方法

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { getDirectory } from 'api/autoOperations/scriptManage'
const props = defineProps({
    placeholder: {
        type: String,
        default: '請(qǐng)選擇目錄',
        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'])
// 樹(shù)狀圖默認(rèn)配置
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()
})
// 這里從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)
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

<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>

最后是效果圖

到此這篇關(guān)于在vue3中使用el-tree-select做一個(gè)樹(shù)形下拉選擇器的文章就介紹到這了,更多相關(guān)vue3樹(shù)形下拉選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: