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

方法一：

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

Answer 2

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