easydo-mes-web/src/layout/components/tenantbar.vue

<template>
    <el-drawer class="tenant-drawer" v-model="visible" title="租户列表" :size="400" append-to-body @closed="$emit('closed')">
        <el-container>
            <el-header>
                <el-input v-model="filterText" placeholder="输入租户名称" clearable></el-input>
            </el-header>
            <el-main class="nopadding">
                <el-scrollbar>
                    <el-tree node-key="id" :current-node-key="$store.state.tenant.tenantId" :data="tenants" highlight-current @node-click="data => nodeClick(data)">
                        <template #default="{ data }">
                            <vxe-text-ellipsis :id="data.id" :title="data.name" class="custom-tree-node" :content="data.name"></vxe-text-ellipsis>
                        </template>
                    </el-tree>
                </el-scrollbar>
            </el-main>
        </el-container>
	</el-drawer>
</template>

<script>
import XEUtils from "xe-utils";

export default {
    data() {
        return {
            visible: false,
            filterText: ""
        }
    },

    computed: {
        tenants() {
            if (this.filterText) return XEUtils.filter(this.$store.state.tenant.tenants, item => item.name.includes(this.filterText));
            return this.$store.state.tenant.tenants || [];
        }
    },

    methods: {
        open() {
            this.visible = true;
            nextTick(() => XEUtils.arrayEach(document.querySelectorAll(".el-tree-node.is-current"), el => el.scrollIntoView({ block: "center" })));
            return this;
        },

        nodeClick(data) {
            this.$store.commit("SET_tenantId", data.id);
            this.visible = false;
        }
    }
}
</script>

<style lang="scss" scoped>
.el-container .el-header {height: fit-content;padding: 10px;border: none;}
.el-container .el-header .el-input {width: 200px;}
</style>