element远程搜索tree

最新推荐文章于 2024-08-20 15:41:26 发布

HenryDZhang

最新推荐文章于 2024-08-20 15:41:26 发布

阅读量758

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/github_38424391/article/details/106610665

版权

本文介绍如何在Vue项目中使用Element UI库创建一个远程搜索的树形选择组件。通过RemoteTreeSelect.vue和App.vue文件的配置，实现从远程API获取数据并展示动态加载的树节点，同时支持搜索过滤功能。

摘要由CSDN通过智能技术生成

RemoteTreeSelect.vue

<template>
    <el-select
        size="small"
        class="component remote-tree-select"
        popper-class="component remote-tree-select dropdown-wrapper"

        :placeholder="placeholder"
        :loading="loading"
        :value="localValue"
        
        multiple
        collapse-tags

        filterable
        :filter-method="searchFunc"

        @visible-change="e => !e && searchFunc()"

        @remove-tag="removeItem">
        <el-option v-show="false" value=""></el-option>

        <el-option
            v-for="item in selectedOptions"
            :key="item[defaultProps.key]"
            :value="item[defaultProps.key]"
            :label="item[defaultProps.label]"
            v-show="false">
        </el-option>

        <el-tree
            ref="treeEl"

            lazy
            :load="syncFunc"

            show-checkbox
            check-strictly

            @check="selectNode"

            :data="localOptions"
            :props="defaultProps"
            :node-key="defaultProps.key"
            :default-checked-keys="localValue"
            :render-content="renderTreeLabel">
        </el-tree>
    </el-select>
</template>

<script>
export default {
   
    name: 'RemoteTreeSelect',
    props: {
   
        placeholder: {
   
            type: String,
            default: '请选择'
        },
        value: {
   
            types: Object || String,
            default: () => ({
   })
        },
        props: {
   
            type: Object,
            default: () =>