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 = vallet tree = 'tree' + indexthis.$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' + indexlet nodes = this.$refs[tree].getCheckedNodes()let arrId = []if (nodes.length > 0) {nodes.map(item => {arrId.push(item.id)})}let listData = this.dataSource[index].optionlet 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' + indexconst 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)}})
},