复制代码
<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)
}
})
},
