byte-sailing-new/src/components/treeList/index.vue

<!--treeList组件封装-->
<template>
	<div class="treeList">
		<div class="title commons-title">
			{{title}}
		</div>
		<div class="search">
			<el-input
				v-model="search"
				placeholder="请输入搜索内容"
				clearable
				@clear="search = ''"
				@keyup.enter="searchChange"
			></el-input>
			<el-button type="primary" @click="searchChange">搜索</el-button>
		</div>
		<el-tree
			:data="data"
			ref="tree"
			:node-key="['node-key']"
			@node-click="treeChange"
			:filter-node-method="filterNode"
		>
		</el-tree>
	</div>
</template>
<script setup>
defineProps({
	title: {
		type: String,
		default: '租户列表',
	},
	type: {
		type: String,
		default: 'radio',
	},
	data: {
		type: Array,
		default: () => [],
	},
	modelValue: {
		type: Array || String,
	},
	'node-key': {
		type: String,
		default: 'id',
	},
})
const search = ref('')
const emit = defineEmits(['update:modelValue'])
const { proxy } = getCurrentInstance()
const treeChange = (e, data) => {
	if (proxy.type == 'radio') {
		emit('update:modelValue', e.id)
		emit('change', e)
	} else {
		emit('change', e)
	}
}

const filterNode = (value, data,node) => {
	if (!value) return true
	return data.label.indexOf(value) !== -1
}

const searchChange = () => {
	proxy.$refs.tree.filter(search.value)
}
</script>

<style lang="scss">
.treeList {
	display: block;
	height: 100%;
	background: #fff;
	padding: 20px;
	.search {
		margin-bottom: 20px;
		.el-input {
			width: calc(100% - 70px);
			margin-right: 10px;
			text-align: center;
		}
	}
}

</style>