element select + tree

element select + tree的使用

<template slot="action1" slot-scope="text, record, index">
	<el-select v-model="record.tagValue" multiple placeholder="请选择"
		:filter-method="(e) => filterTree(e, index)" filterable 
		@remove-tag="(e) => removeTag(e, index)">
		<el-option>
			<template slot="default">
				<div>
					<el-tree :data="record.option" show-checkbox node-key="id"
						:props="defaultProps" :ref="'tree' + index"
						:filter-node-method="filterNode"
						@check-change="(data, isSelect, childSelect) => handleCurrentChange(data, isSelect, childSelect, index)">
						<template #default="{ node }">
							<div v-html='highlightName(node,searchVal)'></div>
						</template>
					</el-tree>
				</div>
			</template>
		</el-option>
	</el-select>
</template>

// 搜索
filterNode(value, data) {
	if (!value) return true;
	return data.name.indexOf(value) !== -1;
},
filterTree(val, index) {
	this.searchVal = val
	let tree = 'tree' + index
	this.$refs[tree].filter(this.searchVal);
},
// 搜索字体高亮
highlightName (item,val) {
	let textHtml = "";
	if (val) {
		let highlightTextList = val.split("#~~~~");
		let newName = item.data.name;
		highlightTextList.forEach((text) => {
		if (item.data.name.indexOf(text) > -1) {
			newName = newName.replaceAll(
			text,
			`<span class="minddleContent">${text}</span>`
			);
		}
		});
		textHtml += newName;
	} else {
		textHtml += item.data.name;
	}
	return textHtml;
},
// 获取知识树选中值
handleCurrentChange(data, isSelect, childSelect, index) {
	let tree = 'tree' + index
	let nodes = this.$refs[tree].getCheckedNodes()
	let arrId = []
	if (nodes.length > 0) {
		nodes.map(item => {
			arrId.push(item.id)
		})
	}
	let listData = this.dataSource[index].option
	let listText = this.getStructuredKeys(arrId, nodes, listData)
	this.dataSource[index].tagValue = listText.map(item => {
		return item.name
	})
},
// 知识树选中值递归，选中子集只展示子集，父级全选只展示父级
getStructuredKeys(keys, list, listData) {
	const result = [];
	const processNode = (nodes) => {
		nodes.forEach((node) => {
			if (keys.includes(node.id)) {
				result.push(node);
			} else {
				if (node.children) {
					const childKeys = this.getStructuredKeys(keys, list, node.children);
					console.log(childKeys)
					if (childKeys.length > 0) {
						result.push(...childKeys);
					}
				}
			}
		});
	};
	processNode(listData);
	return this.sortSelectedItems(result, list);
},
// 选中项排序
sortSelectedItems(result, list) {
	const SelectedItems = result.map(v => v.id)
	const sortList = [];
	list.filter(item => {
		if (SelectedItems.includes(item.id)) {
			sortList.push(item);
		}
	})
	return sortList
},
// 移除select-tree选中值
removeTag(tag, index) {
	let tree = 'tree' + index
	const checkNodes = this.$refs[tree].getCheckedNodes();
	const newCheckNodes = checkNodes.filter(item => {
		return item.name !== tag
	})
	const removeIds = [];
	const removeNodes = checkNodes.filter(item => {
		return item.name === tag
	});
	this.getNodeChildIds(removeNodes, removeIds)
	const checkIds = []
	newCheckNodes.forEach(item => {
		if (!removeIds.includes(item.id)) {
			checkIds.push(item.id);
		}
	})
	this.$refs[tree].setCheckedKeys(checkIds)
},
// 移除选中递归
getNodeChildIds(nodes, result) {
	nodes.forEach(item => {
		result.push(item.id)
		if (item.children && item.children.length > 0) {
			this.getNodeChildIds(item.children, result)
		}
	})
},