我用的版本是 vue3.0
ant 2.2.8
想实现搜索功能只需要 加一个
:filterTreeNode="filterTreeNode"
// 搜索
const filterTreeNode = (value, node) => {
if (node.props.name.indexOf(value) > -1) {
if (node.props.dataRef.children.length !== 0) {
level1.value = node.key;
} else {
return node.props.name.indexOf(value) > -1;
}
} else if (
node.props.name.indexOf(value) === -1 &&
node.props.dataRef.children.length === 0
) {
return node.props.key.indexOf(level1.value) > -1;
}
};
filterTreeNode内可以自己处理数据
因为我这里要求搜索第二层时候保留第三层的数据且选中搜索的某一项后一直保持展开状态
所以写的比较繁琐,大家根据自己的适度采纳
我这里在写的时候遇到一个问题就是默认展开我写完后并不生效
最后发现原因是我只把想展开的那一层的key放进去了
但是生效要求我把它的爸爸爷爷的key都放进去所以处理的时候又多了一部分
v-model:treeExpandedKeys="treeDefaultExpandedKeys"
const filterTreeNode = (value, node) => {
if (node.props.name.indexOf(value) > -1) {
if (node.props.dataRef.children.length !== 0) {
level1.value = node.key;
if (
JSON.stringify(treeDefaultExpandedKeys.value).indexOf(JSON.stringify(node.key)) === -1
) {
arr.push(node.props.key);
treeDefaultExpandedKeys.value = arr;
}
if (
JSON.stringify(treeDefaultExpandedKeys.value).indexOf(
JSON.stringify(node.key.split('-')[0] + '-' + node.key.split('-')[1]),
) === -1
) {
arr.push(node.key.split('-')[0] + '-' + node.key.split('-')[1]);
treeDefaultExpandedKeys.value = arr;
}
} else {
if (
JSON.stringify(treeDefaultExpandedKeys.value).indexOf(JSON.stringify(node.key)) === -1
) {
arr.push(node.key);
treeDefaultExpandedKeys.value = arr;
}
if (
JSON.stringify(treeDefaultExpandedKeys.value).indexOf(
JSON.stringify(node.key.split('-')[0] + '-' + node.key.split('-')[1]),
) === -1
) {
arr.push(node.key.split('-')[0] + '-' + node.key.split('-')[1]);
treeDefaultExpandedKeys.value = arr;
}
if (
JSON.stringify(treeDefaultExpandedKeys.value).indexOf(
JSON.stringify(
node.key.split('-')[0] +
'-' +
node.key.split('-')[1] +
'-' +
node.key.split('-')[2],
),
) === -1
) {
arr.push(
node.key.split('-')[0] +
'-' +
node.key.split('-')[1] +
'-' +
node.key.split('-')[2],
);
treeDefaultExpandedKeys.value = arr;
}
return node.props.name.indexOf(value) > -1;
}
} else if (
node.props.name.indexOf(value) === -1 &&
node.props.dataRef.children.length === 0
) {
return node.props.key.indexOf(level1.value) > -1;
}
};