tree组件点击请求了多次接口?
引入子组件
<CheckTreee @nodeClicked="nodeClicked"></CheckTreee>
子组件中获取选中的id
<el-tree
ref="treesRef"
style="max-width: 600px"
:data="dataTree"
node-key="id"
:props="defaultProps"
show-checkbox
:expand-on-click-node="false"
@check-change="handleClick"
/>
let checkID = ref<any[]>([]);
const handleClick = async (node: any, isCheck: any) => {
if (isCheck) {
checkID.value.push(node.id);
} else {
checkID.value.forEach((item, i) => {
if (item === node.id) {
checkID.value.splice(i, 1);
}
});
}
emit("nodeClicked", checkID);
};
///根据id取调用接口查数据
const nodeClicked = (val: any) => {
selectData.type = val.value.join(",");
getData(selectData);
};
回复
1个回答

test
2024-06-19
方法一:
// 引入防抖函数,如lodash的debounce
import { debounce } from 'lodash';
// 在父组件中定义防抖处理的nodeClicked方法
const debouncedNodeClicked = debounce(nodeClicked, 300); // 延迟时间可以根据需求调整
// 修改子组件引用,使用防抖后的回调函数
<CheckTreee @nodeClicked="debouncedNodeClicked" />
方法二:
// 子组件中引入一个定时器和一个临时变量存储待发送的节点ID
let timer: NodeJS.Timeout | null = null;
let pendingNodeIds: any[] = [];
const handleClick = async (node: any, isCheck: any) => {
if (isCheck) {
checkID.value.push(node.id);
pendingNodeIds.push(node.id);
} else {
checkID.value.forEach((item, i) => {
if (item === node.id) {
checkID.value.splice(i, 1);
}
});
pendingNodeIds = pendingNodeIds.filter(id => id !== node.id);
}
clearTimeout(timer); // 清除之前的定时器
timer = setTimeout(() => {
// 在延迟时间后触发nodeClicked事件,发送请求
emit("nodeClicked", pendingNodeIds);
pendingNodeIds = []; // 重置待发送节点ID列表
}, 300); // 延迟时间可以根据需求调整
};
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容