javascript - tree组件点击请求了多次接口？

Question

引入子组件

<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);};

Answer 1

你应该在点击复选框的事件回调里去抛事件,这也符合你的语义nodeClicked

Answer 2

方法一：

   // 引入防抖函数，如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); // 延迟时间可以根据需求调整   };